垂直对齐和浮动DIV问题内线高度

Question

我们在＃1审查这里的问题，一个语气关于垂直对齐和高度100分％的问题，如：

https://stackoverflow.com/questions/6743208/css-why-vertical-align-middle-does-not-work

Fill height of a floating nested div

css div 100% height issue

还有更类似的链接，但他们都没有帮助我们。

---

的jsfiddle代码：http://jsfiddle.net/cD6nd/1/

HTML代码：

<div id="header"> 
<div id="logo_container"> 
    <a href="main-catalog"><img src="img/logo-finder.png" alt="Logo Example"></a> 
</div><!--Logo container--> 
    <a href="main-catalog" id="aplication_lookup_button" class="button_link">Search by application</a> 
    <a href="search-product-catalog" id="search_product_button" class="button_link">Search by part number</a> 
</div><!-- Main header where logo and buttons are showed it --> 

CSS代码：

#header 
{ 
    width:100%; 
    background: #000; 
    float:left; 
} 

#logo_container 
{ 
    width: 14.0056%; 
    text-align: center; 
    float: left; 
} 

#logo_container img 
{ 
    max-width: 50%; 
    height: auto; 
} 

.button_link{ 
    text-align: center; 
    color: white; 
    text-decoration:none; 
    text-transform: uppercase; 
    width: 25%; 
    height: 4.1em; 
    float: left; 
} 

#aplication_lookup_button 
{ 
    background: #424242; 
    border-bottom: 4px solid #2eaeb8 
} 

#search_product_button:hover 
{ 
    color: #2eaeb8; 
    font-weight: bold; 
} 

下面是它如何看待这个MOME快照NT：

---

我们希望有一个-HREF文本是在容器的中间，我们想用height:100%，而不是我们使用目前使用em的。

Answer 1

可以使用伪元素和内联块属性：

.button_link:before { 
     content:''; 
    display:inline-block; 
    height:100%; 
    vertical-align:middle; 
    } 

http://jsfiddle.net/cD6nd/5/

，如果你想换行的内联块元素和显示多行http://jsfiddle.net/cD6nd/6/

Answer 2

http://jsfiddle.net/cD6nd/2/

.button_link { 
    line-height: 70px; 
    width: 40%; 
} 

编辑：

拨弄宽度40％的添加http://jsfiddle.net/cD6nd/4/