垂直對齊和浮動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/