Question

我有类似

的东西

<div class="container">
   <a href="/link">Link1 </a>
   <a href="/link">Link2 </a>
</div>

容器高度为100像素。我希望第一个链接大约为50px，下一个链接就在它下面。

我只找到了如何将1个链接标记与行高垂直居中但不适用于2个链接标记的解决方案。

它必须适用于IE 8 +

Answer 1

*{margin:0;}


.container{
  overflow:hidden;
  height:100px;
  background:#ddd;
}

.container a{
  display:block;
}
.container a:nth-child(1){
  margin-top: 50px;
}

<div class="container">
   <a href="/link">Link1 </a>
   <a href="/link">Link2 </a>
</div>

.container a{
   display:block; /* bam, now are vertically aligned inside container */
}
.container a:nth-child(1){ /* Target the first A */
   margin-top: 50px ;      /* play around that one */
}

Answer 2

.container > a{
    display:block;
}
.container a:first-child{
    padding-top:50px;
}

：IE8支持第一个孩子

请在此处查看jsfiddle：http://jsfiddle.net/fdguyjrb/2/

如何使用CSS垂直居中2个锚标签？

2 个答案: