html - 垂直居中 anchor 标记到右侧 float 元素

Question

我一直在寻找一种根据 span 标签垂直居中 anchor 标签的方法，这两个标签都包含在 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 { 行高:46px; }

注意:我刚刚使用了 a，但您可能想要添加一个类，这样样式就不会应用于所有 anchor 标记。

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