2013年03月03日

[html][css]vertical-align:middle;が効かないときの解決策まとめこのエントリーをはてなブックマークに追加

まず、vertical-align:middle;は子要素に継承されません
middleにしたい要素にはひとつずつ書く必要があります!!

そして、vertical-align:middle;はインライン要素にしか効きません。

インライン要素とは、つまり以下のタグ。

<a>、<b>、<font>、
<span>、<img>、<input>、<label>、<select>、<textarea>
<basefont>、<br>、<em>、
<i>、<s>、<small>、<strong>、<sub>、
<sup>、<u>
<abbr>、<acronym>、<bdo>、<big>、
<cite>、<code>、<dfn>、<kbd>、<q>、
<samp>、<strike>、<tt>、<var>



要するに、<div><p>には効かないということです。

衝撃の事実。


■ブロックレベル要素の場合はdisplay:table-cellを付けましょう



<div style=”display:table-cell”>してあげるとあら不思議、効きます。

■高さの指定は忘れずにね



中心を得るには基準となる高さが必要です。
なので、必ずその要素にはheight:30px;のように高さを与えましょう。
table-cellでテーブルを作るのが一番です。


■絶対効く例


<div style="width:500px;height:100px;display:table-cell;text-align:center;vertical-align:middle;background:#7f7;margin:10px;">真ん中<br>複数行でもOK</div>





これに関連した記事→│ css  
この記事へのコメント

daikon ┐ : 2013年09月17日 20:49
はじめまして!
ある方に参考になる日記として教えていただき、訪問しました。

IE10の場合、{ display: table-cell } にしてあげても、「 vertical-align : middle 」が効かなくて困っています。

上の記事にあるようにすると、横書きの場合には、たしかに文章は中段に寄ってくれます。
ところが、縦書きにすると、IE10では中央に寄ってくれず、右端に文章が寄ってしまうのです。

ところが、グーグルのChromeでは中央に寄ってくれます。

どうなっているのでしょうね?

くじ ┐ : 2013年09月21日 18:11
daikonさんこんにちは。参考になるとは嬉しいです、ありがとうございます。
IE10持っていないのでわからないのですが、縦書きとなるとかなり違う話になるかと思います。
縦書き自体はHTML5でもCSS3でも仕様が固まっていない(たぶん。ブラウザが実装しないだけ?)ので、かなりナイーブなところかなぁと・・

力になれずごめんなさい!

匿名 ┐ : 2013年11月09日 10:11
横から失礼ですが…

IE10に効かないとなると、ほとんど実用レベルではないですね^^;

くじ ┐ : 2013年11月09日 23:00
どうぞどうぞ、ご利用はご自由にお願いします!

なべ : 2014年02月24日 14:16
とりあえず、firefoxとie9で効きました!
ありがとうございました!

 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/qoozy/52595886