html - 如何使用 CSS 垂直居中 2 个 anchor 标记？

Question

我有类似的东西

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

容器的高度为 100px。我希望第一个链接在 50px 左右，下一个链接就在它下面。

我只找到了关于如何使用 line-height 垂直居中 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 */
}