背景画像が設定された順序なしリストがあります。すべてのリストアイテムの高さは同じで、背景画像は左中央に配置されます。
各項目のテキストは、liに対して垂直方向の中央である必要があります。これは、単一行のテキスト(liの高さに応じて行の高さを設定することによる)ではうまく機能しますが、2行のテキストでは機能しません。
2行のアイテムに「line-height:normal」を追加することもできますが、すべてのアイテムで機能するソリューションが必要です。
これどうやってするの?
例:
li {
list-style-type:none;
padding-left:40px;
height:36px;
line-height:36px;
background:url('tick.png') no-repeat 0 50%;
}
これは最もクロスブラウザソリューションです
li {
width : 200px;
line-height : 100px;
height : 100px;
border : 1px blue solid;
}
li span {
display : -moz-inline-box; /* FF2 or lower */
display : inline-block; /* FF3, Opera, Safari */
line-height : normal;
vertical-align : middle;
}
li span { *display : inline;} /* haslayout for IE6/7 */
<ul>
<li><span>My text</span></li>
<li><span>My longer text</span></li>
<li><span>My text, but this time is really wide</span></li>
<li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>
簡潔にするためにスターハックを使用しました。避ける必要があります。 html5boilerplateソリューションを使用するだけで、bodyタグに条件付きコメントを使用します
li {
height:200px;
line-height:200px;
border:1px solid red;
}
li span {
vertical-align:middle;
display:inline-block;
line-height:1.2;
}
<li>
<span>two<br />lines</span>
</li>
動作するはずです。
編集:変更を確認するために更新