- 締切済み
DIVボックス内でのCSSを使用した縦位置指定方法
CSSにてheight、weightを指定したDIVタグの中にテキストを記述し、縦位置の中央揃えを行いたいのですが、方法がわかりません。 "vertical-align:middle;"などを指定しましたが、適用されませんでした。 スタイルに関することは全てCSSで行いたいので、TABLEタグなどでvalignを指定する方法は取りたくありません。 何かいい方法をご存知の方がいらっしゃいましたら、ご回答をよろしくお願いいたします。
- counter_class
- お礼率54% (24/44)
- HTML
- 回答数5
- ありがとう数13
- みんなの回答 （5）
- 専門家の回答
みんなの回答
<div>要素に、IDかclass属性を、持たせ、text-align:center;を記述する。 box1 {width:200px;height:150px;text-aligen:center;border:solid 1px #999;}
- MrYoYoYo
- ベストアンサー率33% (38/115)
width と height が指定されているのならば簡単です。 padding,marginの指定がDIVにされていないならば、ブラウザでくずれる心配もまずありません。標準モードにしておくほうが無難だと思いますが。。。 方法は、 position:relative; top:50%; を指定した後で margin-top: -（heightの半分のピクセル）; マイナス指定して、半分もどしてあげます。 しかし、中にいれるテキストの長さ、大きさが動的に変わるとなると少しややこしくなります。 ちなみに、vertival-align指定はテーブルにのみ適応されます。 つまり、外枠にひとつテーブルをつくり、そのtdにvertical-align指定をすれば一番すっきり解決されます。テーブルそのものを使いたくない場合は、手間ひまかけるしかありません。
強引な方法なのかもしれませんが、position:relative;で真ん中あたりに配置できます。 この場合の移動距離は親要素の高さに依存しますから、標準的なブラウザであれば問題ないと思います。 <div style="border:red 2px solid;width:200px;height:200px;"> <span style="position:relative;top:50%;left:0px;">test</span> </div>
- randman
- ベストアンサー率51% (17/33)
line-heightを使った方法があります。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テスト</title> </head> <body> <div style="border:#000000 1px dotted;width:256px;height:256px;text-align:center;line-height:256px;">これはテストです。</div> </body> </html> heightを%で指定したければ、padding:50% 0% 50% 0%;という方法もあります。 が、いずれも完璧ではありません。ちょっとしたことでレイアウトが崩れてしまいます。使用の際はご注意を…。
- yambejp
- ベストアンサー率51% (3827/7415)
cssの解釈の問題の様なのですが、残念ながら IEにはそのような設定方法がなさそうです。 たとえばFFなどだとdisplay:table-cellを指定 するとvertical-alignを有効にできます。 テーブルが嫌なら素直にあきらめてください <style> div.x{ width:300; height:200; background-color:blue; display:table-cell; vertical-align: middle; } </style> <body> <div class="x"> test<br> test<br> test<br> </div> </body>
関連するQ&A
- 【CSS】divの中で縦方向の中央揃えは、どうやってかくのでしょうか？
すいません、divの中で縦方向の中央揃え、つまり、 divの代わりにtableタグの中のtdで書いた場合の、 <td valign="middle">ほげほげ</td> と同じことをdivで実現するにはどうすればいいのでしょうか？ ご存じの方いらっしゃったら、よろしくお願いいたします。
- 締切済み
- HTML
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
- CSSでセル高さを固定して縦中央にテキストに配置する方法（DW上でも）
.th01{ background-color: #000066; color: #FFFFFF; font-size: 14px; font-weight: bold; background-image: url(../images/back01.gif); background-repeat: repeat-x; vertical-align : middle; height: 28px; } うまく縦中央に表示されるのですが、DW上ではうまく中央に表示されずに上にいってしまいます。これは仕様なのでしょうが、そもそもDWにはCSSで縦中央を指定する項目は無いのでしょうか？
- 締切済み
- HTML
- 縦方向の位置決め
何故か<td>の中の文字が上に寄っているんです。 こういう時、物の本によると、vertical-align属性とかvalign属性とかを使うそうです。 で、使ってみたんですけど、何も変わらないのは何故？ すみません。教えてください。 ***************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> <!-- *{ font-size: 12px; font-weight: normal; } body { width: 476px; } img { float: left; } h1 {margin: 0px; } h2 {float: left; font-weight: bold; } .divTitle { border: 1px solid #999999; } .divTitle tr { vertical-align: middle; } .date {float: right; } --> </style> </head> <body> <table class=divTitle width="476" cellpadding="0" cellspacing="0"> <tr valign="middle"> <td> <img src="img/w_name.gif" width="80" height="23" alt="投稿者"> <h2>관리자</h2> <div class="date">(2009-04-26 13:47:39, Hit : 6, Vote : 0)</div> </td> </tr> <tr> <td height="24" valign="top"> <img src="img/w_subject.gif" width="80" height="23" alt="タイトル"> <h3>[re] 다시 문의요-</h3> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSでセル内の文章の縦位置をTOPにしたい
テーブルを作成しました。セルの数は随時増やしていく予定にしてます。 デフォルトではmiddleになっている縦方向の位置をCSSを使って一括でTOPに設定しておきたいのですが…タグに<tr valign="top">と設定すればよいのですが、行数が増える一方になるので、できるだけ内容をスッキリさせたいところです。CSSで設定できればいいなと思います。横位置はtr{text-align:center}で指定できるようですがtr{text-valign:middle}とやっても変化がなかったので（強引）… よい方法がありましたら教えて下さい。宜しくお願い致します。
- ベストアンサー
- HTML
- 画像をボックスの中心に位置付けたい…
ネットで調べていくつかのパターンを試してみましたが、 vertical-align:middle;が全然かかりません。。。 同じボックスをいくつも作ってその中に様々なサイズの画像を配置したいのです。 .bb_box{ width:210px; height:90px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:90px; } .b_img{ vertical-align:middle; } <div class="bb_box"><img src="○○○" alt="○○" width="91" height="33" border="0" class="b_img" /></div> 間違い箇所がたくさんあるかと思いますがご教示ください。よろしくお願いいたします。
- ベストアンサー
- CSS
- 【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？ text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。
- ベストアンサー
- HTML
- スタイルシートでの文字位置の指定
正方形の中心に文字があるようなデザインにしたくて 次のように記述したのですがうまくいきません。 .text{ height : 160px; width : 160px; color : #FFFFFF; padding: 0px; margin: 0px; background-color: #6C3C1F; font-size: 15pt; text-align: center; vertical-align: middle; font-weight: bold; } 横位置はきちんと中央揃えになりますが、 縦の位置は文字が正方形内で上揃えになってしまいます。 どうすれば希望のデザインにできるか教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- HTML
