Question

我有一个动态大小的div offers，然后在6个li标签内，每个标签高度为16.6％以填充div。每个li代码中都有一个a代码，但我希望垂直对齐 a代码。我看了很多不同的解决方案，似乎没有一个对我有用。我的代码的一个例子是：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这是一个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

您可以使用Flexbox

代替表格

您可以使用flex-direction: column上的.offers和flex: 1上的li使每个li均匀分布，而不是使用%
您可以对每个display: flex使用align-items: center和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 3

使用display：flex;在李元素上。之后放上align-items：center;在它上面。

为crossbrowser compatibilitybillity使用前缀。

Answer 4

添加以下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 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>

将li标签中的标签与动态高度垂直对齐

5 个答案: