Question

我一直在寻找一种根据span标签垂直居中锚标签的方法，这些标签都包含在div标签内。

我的HTML

<div id="project_list">
  <div class="title">
    <a href="/projects/example/">Example Project</a>
    <span class="show_details">Show Details</span>
    <div style="clear: both"></div>
  </div>
</div>

我的CSS

div#project_list {
  border: 2px solid #000000;
}

div#project_list div.title {
  background: grey;
  padding   : 10px;
}

div#project_list div.title a {
  font-size: 1.231rem;
}

div#project_list span.show_details {
  background: orange;
  float     : right;
  padding   : 13px 5px;
}

我还创建了一个JSFiddle here，所以你可能会看到我在说什么。

提前感谢所有人，因为我现在已经绞尽脑汁想要如何做这几天了。

Answer 1

您可以将线条高度设置为与按钮高度匹配：

a { line-height:46px; }

注意：我刚刚使用了a，但您可能希望添加一个类，因此该样式不会应用于所有锚标记。

http://jsfiddle.net/GxqTh/2/

Answer 2

@ OpenNoxdiv-尝试在标签中添加填充; 20px似乎很适合我。 - 见下文

#project_list div.title a {

填充顶：20像素; }

将锚标记垂直居中到右浮动元素

2 个答案: