如何垂直居中<a>标签？

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>

我就是想不明白该如何自动修复头部的那个标签。

- Ilja

---

@MarcB 你好，那对我没用；/ - Ilja

垂直居中是根据什么来确定的？下面有一个段落，这个段落可能只有一行或者有10000行，您想要绝对居中吗？ - Ali Bassam

@AliBassam 我想我确实是指绝对居中。 - Ilja

Answer 1

只需在你的锚点样式中添加一个行高属性，使其等于容器的内边距和段落的外边距之和：line-height : 50px;

http://jsfiddle.net/HS6Lp/

- AlienWebguy

---

行高不是一个选项，因为有多行文本：http://jsbin.com/arudif/2/edit - Ilja

不符合你的问题和例子。我的回答解决了你的问题。如果你想要特定的答案来应对所有问题，你需要在问题中披露这些障碍。 - AlienWebguy

Answer 2

如果要使 a 元素在不考虑容器中的其他内容的情况下居中，可以使用绝对定位。

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

- Ali Bassam

---

如果您在多个div中有多个a标签，比如在导航栏中，那么这种方法就不起作用了，大多数情况下a标签会由于绝对定位而重叠在一起。 - vikrant

Answer 3

这里有一种使用display:table;和display:table-cell;的方法。我向div添加了高度以显示它实际上是居中的。同时，我删除了你的float，因为它会与对齐方式冲突。

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

- Omega

---

没有起作用：http://jsbin.com/arudif/2/edit - Ilja

它是有效的，正如我的示例所示（http://jsfiddle.net/LR6rz/）。它在你的示例中不起作用，因为你保留了float:right;，这与我说的会发生冲突。 - Omega

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以尝试代码。

- Mark Reilly