CSSでテキストを垂直、中央に設定する方法

Question

はじめまして。
現在、CSSを勉強中のものですが、タイトルにあるCSSでテキストを垂直方向に中央に配置する方法がわかりません。

clearfix {
margin-top: 0px;
text-align: left;
width: 530px;
height: 100px;
vertical-align: middle;
}

とクラスで設定したのですが、DWのデザイン画面はもちろん、ブラウザで確認してもちゃんと表示されません。

解決方法を教えていただけないでしょうか？
どうかよろしくお願いいたします。

goulan · Accepted Answer

No.1です、ごめんなさい、御質問を 誤解釈してました；；； 投稿してから気付くとはおまぬけです。

ブラウザの仕様として、スクロールするため、cssでは不可能かと思います。敢てするならば、スクロールを止め、サイト訪問者のブラウザサイズを指定し、position: absolute; するしかありません。スクロールしても常に上下の中央配置ならば、javascriptで実現できます。同じく、サイトを見る側のブラウザサイズを指定するには javascriptが有効です。

作ろうとなさっているページが、width: 530px ; height: 100px; のみならば、ユーザーのブラウザと画面サイズの一般的な公約数を考え、body に  height を指定、そして clearfix に position: absolute ; を指定、同じく top を指定、でしょうか。
誰が、どの画面、どんなブラウザサイズでみても 上下の中央となると、javascript にするしかないと思います。

picto3 · Answer

失礼します。「同じ行のテーブルで片方右側が3行のテキストで…」は分からないのですが「CSSでテキストを垂直方向に中央に配置する方法」について回答します。 ―――――――――――――――――――――― ■cssの記述 ―――――――――――――――――――――― div.clearfix{ 　　position:absolute; 　　top:50%; 　　left:50%; 　　width:400px; 　　height:60px; 　　margin-top:-30px; 　　margin-left:-200px; 　　border:1px solid #ccc;}/*←要素のエリアが分かりやすいように枠線を表示*/ p{ 　　height:20px; 　　margin:0; 　　padding:0;} ―――――――――――――――――――――― ■htmlの記述 ―――――――――――――――――――――― 　

サンプルテキスト1行目

サンプルテキスト2行目

サンプルテキスト3行目

―――――――――――――――――――――― 垂直中央は領域の縦幅が決まっていないと、設定は難しいと思います。なので、

の高さを20pxに固定して、仮に三行文章を入れるとすると【div.clearfix】で「height:60px;」と設定します。高さが60pxであれば、「margin-top」にはその半分の値のマイナス値「-30px」を設定して下さい。高さが200pxであれば、「margin-top:-100px」となります。）水平方向も中央に表示されるように指定してあります。解決に繋がるとよいのですが…的外れな回答でしたら申し訳ありません。

goulan · Answer

こんばんわ。＞無理なんですか・・・厳密な中央は、cssのみでは無理だと思います。javascriptで、UAを判別、window sizeを指定して、その高さの半分の位置に配置指定、でしょう。だいたい真ん中かな、程度ならば、多分 margin-top: 30%; くらいで実現できるはずです。ただ、前回答の通り、ブラウザ毎の変位が激しいです。それと後続の box次第では、位置が動きますね。＞左側のテキストを真ん中、中央ではなく、（左）ななめ上に配置させるななめ上というのは、どういう意味なのかちょっと不明なのですが、隣の３行あるセルの１行目の位置にしたいなら、で実現できます。cssなら・・・ vertical-align: top; ですね。これはどちらも指定可能です。なら一行全部、ならば、そのセルのみです。

goulan · Answer

No.1 です、捕捉です。

margin は %指定がありますから、margin-top: 30%; くらいでやってみてはいかがでしょう？ これはブラウザによって、表示位置が結構変わるとは思いますが、簡易に実現できるかと思います。

goulan · Answer

こんばんわ。
>CSSでテキストを垂直方向に中央に配置する方法
テキストラインを、縦書きにしたいという意味でしょうか？ それとも、ブラウザの中央に width: 530px; height: 100px; text-align: left; を配置したいという意味でしょうか？

縦書きならば、色々な方法がありますが、概して面倒です。pre を利用して全角空白を作るとかありますね。縦書きにするソフトもあったような気がします。検索すると出て来るかと。

ブラウザ中央に配置したい、つまり 左右は等空白にしたいならば、センタリングすれば出来ます。margin: 0px auto; 指定がそうです。ただ、某ブラウザは、これだけでは出来ません。text-align : center; を必要とします。実は、解釈が違うのですが、仕様みたいですね。

body{
margin: 0px auto;
padding: 0px;
text-align: center;
}
div.center{
width: 700px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
div.clearfix {
margin-top: 0px;
text-align: left;
width: 530px;
height: 100px;
vertical-align: middle;
}
body に text-align:center; と margin: 0px auto; を指定、body 直下に 上記 div.center 、その中に div.clearfix を入れ子にして下さい。div.clearfix 全体が、センタリングされます。

CSSでテキストを垂直、中央に設定する方法

No.1です、ごめんなさい、御質問を 誤解釈してました；；； 投稿してから気付くとはおまぬけです。

失礼します。

こんばんわ。

No.1 です、捕捉です。

こんばんわ。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

No.1です、ごめんなさい、御質問を誤解釈してました；；；投稿してから気付くとはおまぬけです。