- ベストアンサー
CSS：文字の上下の中央揃え
h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか？ 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "ＭＳ ゴシック"; background-color: #88ceff;}
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
vertical-alignはテーブルセル内の中央寄せです。 上下のpaddingで設定してください。
その他の回答 (1)
- SAYKA
- ベストアンサー率34% (944/2776)
vertical-alignは隣接する要素に対してどこで揃えるかっていう指定だよ。 つまり極端には <img /><span /> のようになっている場合にimgとspanの縦をどこで合わせるかっていうのを設定するもの。 だから質問で言っている「h3」の「中の文字の縦を合わせたい」というのは実はこのままでは無理って事になるね。 この理屈で修正してうまくいかないようなら ちょっと美しくない方法としては縦30pxの見えない箱を並べてそこと合わせるという方式かNo1の言うようにtableを使うか じゃないかな。
お礼
vertical-alignは要素内の高さの位置を決める指定ではないんですね。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
vertical-alignというのはテーブルセル内での中央寄せですか。 なるほど。ボックス内の余白paddingを使用して設定するわけですね。 ありがとうございました。