liの中の要素を、常にその行の中央に来るようにコーディングしたいのですが、方法がわかりません。(下記だと150pxの行なので、常に75pxのところに揃えたい。)
【html】
<ul>
<li><p>マル</p></li>
<li><p>マル</p></li>
</ul>
【css】
li{
height:150px;
border:1px solid #111;
display:inline;
float:left;
}
p{
vertical-align:middle;
}
のようになっているのですが、どこをどのように修正すれば、いいのかをご教授ください。
みんなの回答 5 件
li{
border:1px solid #111;
display:table;
float:left;
}
p{
display:table-cell;
vertical-align:middle;
}
pタグいる?
ul{
display:table;
width:100%;/*横一杯にする場合*/
table-layout:fixed;/*等間隔にする場合*/}
li{
display:table-cell;
vertical-align:middle;}
htmlのマニュアル読んだ?
vertical-alignの対象ってなんだった?
ちなみに、liの中身が折り返しのないテキストや画像ならば、line-height: 150pxで事足りるぞ。
ポイントは、Tableタグに変換するってとこな
display:inline;指定してるのにfloat:leftとかしちゃってるので、
まずはブロック要素とインライン要素がどういう挙動をするのか勉強した方がいい
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
http://webdesignrecipes.com/css-blocklevel-elements/関連するトピックス