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

Question

我一直在寻找一种方法来根据跨度标记垂直居中定位标记，它们都被包裹在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 { 

padding-top：20px; }