html - 垂直居中标签？

Question

我正在努力将元素中的标签垂直居中。

我得到的是这样的：

http://jsbin.com/arudif/2/edit

<style>
 header {padding: 20px 0 20px 0; clear: both;}
 header a {
   float: right;
   vertical-align: middle; 
   margin: auto 0 auto 0;
   } 
   //This is what I tried, doesnt work
</style>

<header>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</header>

我只是想不出 auto ho 来修复标题中的那个标签

Answer 1

只需在您的锚规则中添加一个 line-height 属性，该属性加起来就是容器的填充和段落的边距：line-height : 50px;

http://jsfiddle.net/HS6Lp/

Answer 2

在a不考虑容器其他内容的情况下居中，使用绝对定位。

header
{
    position:relative;
}
a
{
    position:absolute;
    top: 50%; // nearly 50%, but not exactly 50%
    left: 50%;
}

Answer 3

这是使用 display:table; 的一种方法。并显示：表格单元格；。我为 div 添加了一个高度以显示它确实居中。还删除了您的浮动，因为它会与对齐冲突。

<div>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</div>

CSS：

div {padding: 20px 0 20px 0; clear: both;background:green;display:table;height:200px;}
div a {
display:table-cell;
   vertical-align: middle; 
   margin: auto 0 auto 0;
   } 

http://jsfiddle.net/LR6rz/

Answer 4

您需要将父级设置header为使用居中文本和自动侧边距。然后将p标签设置为使用左对齐文本。

<style>
header {
  padding: 20px 0 20px 0; 
  clear: both;
  text-align: center;
  margin: auto 0 auto 0; 
}
header a {

}
header p {
   text-align: left;
}
</style>

<header>
   <a href="#">Center Me Please!</a>
   <p> Stack Overflow </p>
</header>

根据您的用例，您可以仅在a标签上设置自动边距，从而允许您在标签上使用不同的边距header。

请参阅http://codepen.io/alienresident/pen/fgkvc来玩弄代码。