將文本垂直對齊到內聯塊的中間

Question

我正在嘗試使文本垂直對齊中間，但似乎無法使其正常工作。

HTML：

<div class="row">
    <div class="col-md-4">
        <a href="#" class="custom-button width-100">Login</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="custom-button width-100">Menu</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="custom-button width-100">Contact</a>
    </div>
</div>

CSS：

.custom-button {
color:#ECDBFF;
background-color:#4F0100;
display:inline-block;
height: 220px;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
text-decoration:none;
}

.width-100 {width: 100%;}

我用Google搜索了不少，並試圖一對夫婦的事情，但我似乎無法得到文本去中間。 誰能建議我需要添加/更改才能使它工作。

Answer 1

如果您的文本僅限於單行，那么line-height將是最佳解決方案。

試試這個

line-height:220px; /*height of your container */

JsFiddle演示

Answer 2

您還可以使用vertical-align的偽元素（ :before或:after ）和一個額外的框（ inline-block ）來允許內容換行：請參見下面的代碼段。

 .custom-button { color: #ECDBFF; background-color: #4F0100; display: inline-block; height: 220px; font-family: Verdana, Geneva, sans-serif; font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; } .width-100 { width: 100%; } .custom-button:before { display:inline-block; content:''; height:220px; vertical-align:middle; margin:-0 -0.25em;; } a span {display:inline-block; vertical-align:middle; } 

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/> <div class="row"> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100">Login</a> </div> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100">Menu</a> </div> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100"><span>Cont<br/>act</span></a> </div> </div>