将文本垂直对齐到内联块的中间

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

我已经搜索了很多东西并试了几件事，但我似乎无法将文字转到中间。任何人都可以建议我需要添加/更改以使其工作。

Answer 1

如果您的文字仅限于单行，那么line-height将是最佳解决方案。

试试这个

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

JsFiddle Demo

Answer 2

你也可以使用vertical-align一个伪元素（:before或:after）和一个额外的框（inline-block）来允许内容包含几行：查看并运行下面的代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;