垂直對齊不起作用

Question

我有這樣的HTML：

<div class="title_right mid_center top_menu"> 
    <a class="btn btn-app" href="/Home/ComoFunciona"> 
    <a class="btn btn-app" href="/Home/Tarifas"> 
    <a class="btn btn-app" href="/Home/Contacto"> 
    <a class="btn btn-app" href="/Security/Account"> 
</div> 

的CSS是：

.page-title .title_right { 
    width: 55%; 
    float: left; 
    display: block; 
} 

.mid_center { 
    width: 370px; 
    margin: 0 auto; 
    text-align: center; 
    padding: 10px 20px; 
} 

div.top_menu { 
    height: 167px; 
    vertical-align: middle; 
} 

我怎麼能垂直居中這些按鈕？我不想用填充補丁。

Answer 1

使用display: table-cell與您的vertical-align: middle應該這樣做。

.page-title .title_right { 
 
    width: 55%; 
 
} 
 

 
.mid_center { 
 
    width: 370px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
} 
 

 
div.top_menu { 
 
    height: 167px; 
 
    vertical-align: middle; 
 
    background-color: lightgray; 
 
    display: table-cell; 
 
}

<div class="title_right mid_center top_menu"> 
 
    <a class="btn btn-app" href="/Home/ComoFunciona">1</a> 
 
    <a class="btn btn-app" href="/Home/Tarifas">2</a> 
 
    <a class="btn btn-app" href="/Home/Contacto">3</a> 
 
    <a class="btn btn-app" href="/Security/Account">4</a> 
 
</div>

Answer 2

這很容易與Flexbox。我已經改變了只div.top_menu風格：

.page-title .title_right { 
 
    width: 55%; 
 
    float: left; 
 
    display: block; 
 
} 
 

 
.mid_center { 
 
    width: 370px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding: 10px 20px; 
 
    background-color: violet; 
 
} 
 

 
div.top_menu { 
 
    height: 167px; 
 
    vertical-align: middle; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 

 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 

 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
}

<div class="title_right mid_center top_menu"> 
 
    <a class="btn btn-app" href="/Home/ComoFunciona">1</a> 
 
    <a class="btn btn-app" href="/Home/Tarifas">2</a> 
 
    <a class="btn btn-app" href="/Home/Contacto">3</a> 
 
    <a class="btn btn-app" href="/Security/Account">4</a> 
 
</div>

需要說的，這是一個跨瀏覽器的解決方案，但一些老的瀏覽器不支持Flexbox的。