こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

はじめまして。
現在、CSSを勉強中のものですが、タイトルにあるCSSでテキストを垂直方向に中央に配置する方法がわかりません。

clearfix {
margin-top: 0px;
text-align: left;
width: 530px;
height: 100px;
vertical-align: middle;
}

とクラスで設定したのですが、DWのデザイン画面はもちろん、ブラウザで確認してもちゃんと表示されません。

解決方法を教えていただけないでしょうか?
どうかよろしくお願いいたします。

投稿日時 - 2007-09-20 20:17:53

QNo.3362173

すぐに回答ほしいです

質問者が選んだベストアンサー

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

ブラウザの仕様として、スクロールするため、cssでは不可能かと思います。敢てするならば、スクロールを止め、サイト訪問者のブラウザサイズを指定し、position: absolute; するしかありません。スクロールしても常に上下の中央配置ならば、javascriptで実現できます。同じく、サイトを見る側のブラウザサイズを指定するには javascriptが有効です。

作ろうとなさっているページが、width: 530px ; height: 100px; のみならば、ユーザーのブラウザと画面サイズの一般的な公約数を考え、body に height を指定、そして clearfix に position: absolute ; を指定、同じく top を指定、でしょうか。
誰が、どの画面、どんなブラウザサイズでみても 上下の中央となると、javascript にするしかないと思います。

投稿日時 - 2007-09-20 23:53:42

お礼

ええええええええええ!?
無理なんですか・・・

という前に、夜遅くにご回答ありがとうございます。

ちなみに同じ行のテーブルで片方右側が3行のテキストで、左側が1行のテキストの場合、この左側のテキストを真ん中、中央ではなく、(左)ななめ上に配置させることは可能でしょうか?

お礼の欄に重ねて質問で申し訳ないのですが、どうかよろしくお願いいたします。

投稿日時 - 2007-09-21 00:12:54

ANo.2

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

失礼します。
「同じ行のテーブルで片方右側が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の記述
――――――――――――――――――――――
<body>
 <div class="clearfix">
  <p>サンプルテキスト1行目</p>
  <p>サンプルテキスト2行目</p>
  <p>サンプルテキスト3行目</p>
 </div>
</body>
――――――――――――――――――――――

垂直中央は領域の縦幅が決まっていないと、設定は難しいと思います。
なので、<p>の高さを20pxに固定して、仮に三行文章を入れるとすると
【div.clearfix】で「height:60px;」と設定します。
高さが60pxであれば、
「margin-top」にはその半分の値のマイナス値「-30px」を設定して下さい。
高さが200pxであれば、「margin-top:-100px」となります。)

水平方向も中央に表示されるように指定してあります。

解決に繋がるとよいのですが…的外れな回答でしたら申し訳ありません。

投稿日時 - 2007-09-22 13:21:54

お礼

皆さんありがとうございます。
またお返事が遅くなりもうしわけありません・・・
皆様のおかげで、なんとかセンター表示ができました!

本当にありがとうございました!

投稿日時 - 2007-09-23 22:18:55

ANo.4

こんばんわ。
>無理なんですか・・・
厳密な中央は、cssのみでは無理だと思います。javascriptで、UAを判別、window sizeを指定して、その高さの半分の位置に配置指定、でしょう。だいたい真ん中かな、程度ならば、多分 margin-top: 30%; くらいで実現できるはずです。ただ、前回答の通り、ブラウザ毎の変位が激しいです。それと後続の box次第では、位置が動きますね。

>左側のテキストを真ん中、中央ではなく、(左)ななめ上に配置させる
ななめ上というのは、どういう意味なのかちょっと不明なのですが、隣の3行あるセルの1行目の位置にしたいなら、<tr valign="top"> で実現できます。cssなら・・・ vertical-align: top; ですね。これは <tr> <td> どちらも指定可能です。<tr>なら一行全部、<td>ならば、そのセルのみです。

投稿日時 - 2007-09-21 01:12:59

ANo.3

No.1 です、捕捉です。

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

投稿日時 - 2007-09-21 00:20:12

ANo.1

こんばんわ。
>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 全体が、センタリングされます。

投稿日時 - 2007-09-20 23:39:29

あなたにオススメの質問