liタグ内のaタグを動的な高さで垂直に整列する

Question

私はdivをoffersとし、動的にサイズを指定し、16.6％の高さを持つ6個のタグ内にdivを埋めます。各liタグの内側にはaタグがありますが、にはのaタグが縦に並んでいます。私はさまざまなソリューションを見てきましたが、どれも私のために働いているようです。私のコードの例は次のとおりです。

.offers { 
 
    background-color: yellow; 
 
    height: 200px; 
 
} 
 
.offers li { 
 
    display: table-cell; 
 
    float: left; 
 
    vertical-align: middle; 
 
    border: solid 1px; 
 
    box-sizing: border-box; 
 
    height: 16.6%; 
 
    width: 100% 
 
} 
 
.offers li a { 
 
    background-color: red; 
 
}

<div class="offers"> 
 
<li><a href="#">Link1</a></li> 
 
<li><a href="#">Link2</a></li> 
 
<li><a href="#">Link3</a></li> 
 
<li><a href="#">Link4</a></li> 
 
<li><a href="#">Link5</a></li> 
 
<li><a href="#">Link6</a></li> 
 
</div>

ここcodepenある - http://codepen.io/anon/pen/dXXJEY

Answer 1

あなたが表示テーブルセルを使用したい場合は、次のようにcodepenし、それが動作するはずで、あなたのCSSを置き換える：

.offers { 
    background-color:yellow; 
    height:200px; 
    display: table; 
    width: 100%; 
} 
.offers li { 
    display:table-row; 
} 
.offers li a { 
    background-color:red; 
    display: table-cell; 
    vertical-align:middle; 
    border:solid 1px black; 
} 

Answer 2

使用ディスプレイ：Flexは、 li要素にその後、align-items：center;その上に。

クロスブラウザの互換性のために接頭辞を使用します。

Answer 3

は、CSSの下に追加します。

.offers li:before { 
    display: inline-block; 
    vertical-align: middle; 
    content: ''; 
    height: 100%; 
    width: 1px; 
} 
.offers li a { 
    background-color:red; 
    display: inline-block; 
    vertical-align: middle; 
} 

http://codepen.io/afelixj/pen/ezzVNX

Answer 4

代わりのテーブルあなたはあなたがそれぞれliが均等にすることができます%

を使用しての代わりに、間隔を置いて配置するためにliに.offersとflex: 1にflex-direction: columnを使用することができますFlexbox

1. を使用することができますdisplay: flexとを使用してください各liこのようなa上下中央

.offers { 
 
    background-color: yellow; 
 
    height: 200px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 0; 
 
} 
 
.offers li { 
 
    border: solid 1px black; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    align-items: center; 
 
    flex: 1; 
 
} 
 
.offers li a { 
 
    background-color: red; 
 
}

<ul class="offers"> 
 
    <li><a href="#">Link1</a></li> 
 
    <li><a href="#">Link2</a></li> 
 
    <li><a href="#">Link3</a></li> 
 
    <li><a href="#">Link4</a></li> 
 
    <li><a href="#">Link5</a></li> 
 
    <li><a href="#">Link6</a></li> 
 
</ul>

Answer 5

.offers {background-color:yellow;height:200px;} 
 
.offers li { 
 
    vertical-align:middle; border:solid 1px; 
 
    box-sizing:border-box; 
 
    height:33.33px; 
 
    width:100% 
 
} 
 
.offers li a { 
 
    background-color:red; 
 
    line-height: 33.33px; 
 
} 
 
.offers li a span {line-height: 1em;}

<div class="offers"> 
 
    <li><a href="#"><span>Link1</span></a></li> 
 
<li><a href="#"><span>Link2</span></a></li> 
 
<li><a href="#"><span>Link3</span></a></li> 
 
<li><a href="#"><span>Link4</span></a></li> 
 
<li><a href="#"><span>Link5</span></a></li> 
 
<li><a href="#"><span>Link6</span></a></li> 
 
</div>