4

次のような単純な順序なしリストがあります。

<ul class="flavours">   
     <li>Chocolate</li>
     <li>Caramel</li>
     <li>Watermelon</li>
</ul>

<ul class="flavours">にはmin-heightof があり、jQuery ui のドラッグ アンド ドロップ ライブラリを介してリストに追加される要素が200px増えるにつれて大きくなります。<li>

リストに要素が1 つまたは 2 つしかない場合<li>、これらを全体の真ん中に垂直に揃えるにはどうすればよいですか<ul>。高さの場合200px、アイテムは水平方向と垂直方向の真ん中になります。現在、それらは中央上部に配置されています。

4

3 に答える 3

3

クロスブラウザーのサポートが必要な場合、特に IE や古いブラウザーの場合、JavaScript やテーブルを使用する場合を除き、物事を垂直方向に中央に配置するのは難しい作業になる傾向があります。すべての一般的なブラウザーは、テーブル セル内での垂直方向の中央揃えをサポートしているため、1 つのオプションは、<li>要素の中央揃えを忘れて<ul>、代わりにwithとその中に 1 つのセルtablewithを作成することです。これは一般的な回答ではありませんが、この SO responseでよく議論されているように、テーブルを使用することが最も実用的な場合があります。 height: 100%vertical-align: middle

テーブルを使用したくなく、display:table-cellブラウザのサポートに使用できない場合は、おそらく JavaScript を使用する必要があります。繰り返しますが、ul を ではなくコンテナの中央に配置しようとしliますul。アプローチは通常、コンテナの高さを見つけ、 の高さを見つけ、ul差を取り、半分に切り、 のtopまたはmargin-topをulその値に設定します。これは、配置を使用するかどうかに応じて異なりますabsolute。

ページ内のリストのコンテキストを確認せずに、正確な最適なソリューションを提供することは困難です。

absoluteこれは、ポジショニングと JavaScriptを使用したフィドルです。margin-topこのコンテキストでのデフォルトの使用positionは、外側の div でマージンが崩壊するため注意が必要ですが、使用できる場合は、使用margin: 0 autoして水平方向の中央揃えを行うことができます。これは、幅を無視できるため便利です。

于 2013-04-03T14:14:22.763 に答える
1

個人的には、すべてを親の中心に置きたいと思いdivます...動作中のJSFiddle は、ここにあります。

HTML:

<div>
<ul class="flavours">   
 <li>Chocolate</li>
 <li>Caramel</li>
 <li>Watermelon</li>
</ul>
</div>

CSS:

div{
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}

または、必要に応じて、同じスタイルを に追加することもできulます。

于 2013-04-03T14:17:55.907 に答える