-
ID:dID3xa さんの質問

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 件

ID:uZf6oO さんの回答

li{
border:1px solid #111;
display:table;
float:left;
}
p{
display:table-cell;
 vertical-align:middle;
}

pタグいる?

ID:9GyMKp さんの回答

ul{
display:table;
width:100%;/*横一杯にする場合*/
table-layout:fixed;/*等間隔にする場合*/}
li{
display:table-cell;
vertical-align:middle;}

ID:vA.gJI さんの回答

htmlのマニュアル読んだ?
vertical-alignの対象ってなんだった?
ちなみに、liの中身が折り返しのないテキストや画像ならば、line-height: 150pxで事足りるぞ。

ID:j9cdkx

htmlのマニュアルって何??

ID:lz8Ws5

htmlのマニュアルって何???

ID:SPCHP7

このやり方は邪道なので真似しないように。line-heightはそうやって使うもんではありません。

ID:vA.gJI

>そうやって使うもんではありません。
お前頭堅いな。

ID:TEsZoI さんの回答

ポイントは、Tableタグに変換するってとこな

ID:knA67n さんの回答

display:inline;指定してるのにfloat:leftとかしちゃってるので、
まずはブロック要素とインライン要素がどういう挙動をするのか勉強した方がいい

CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ

http://webdesignrecipes.com/css-blocklevel-elements/
最終更新日:2016-09-30 (2,023 views)

関連するトピックス

ページ上部に戻る