float div中的垂直對齊和高度問題

Question

我們在Stackoverflow中回顧了關於垂直對齊和高度100％問題的問題，如：

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

填充浮動嵌套div的高度

css div 100％身高問題

還有更多類似的鏈接，但它們都沒有幫助我們。

---

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;
}

這是一個關於它如何看待這一時刻的快照：

---

我們希望a-href文本位於容器的中間，我們希望使用height:100%而不是使用我們當前使用的em 。

Answer 1

你可以使用偽元素和內聯塊屬性：

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

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

如果要在inline-block元素中包裝文本並顯示多行，則此技術非常有用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/