垂直对齐不起作用

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的。