垂直整列は

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

を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でかなり簡単です。それはcrossbrowserソリューションだと、言う必要はなく、一部の古いブラウザはフレキシボックスをサポートしていません

.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>

：私だけdiv.top_menuのスタイルを変更しました。