Question

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

我得到的是：

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

我只是无法通过自动来修复标题中的标记

Answer 1

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

http://jsfiddle.net/HS6Lp/

Answer 2

这是使用display的一种方式：table;并显示：table-cell;。我已经为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 3

要中心a而不考虑容器的其他内容，请使用绝对定位。

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

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以使用代码。

垂直居中<a> tag?</a>

4 个答案: