垂直对齐文本到行内块的中间答案

【问题标题】：Vertically align text to middle of inline-block垂直对齐文本到行内块的中间
【发布时间】：2015-04-27 13:52:48
【问题描述】：

我正在尝试让文本垂直对齐到中间，但似乎无法正常工作。

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

我已经用谷歌搜索了很多东西并尝试了几件事，但我似乎无法让文本进入中间。谁能建议我需要添加/更改才能使其正常工作。

【问题讨论】：

你应该搜索这个网站而不是先发帖，因为这个问题已经被问过无数次了。
我确实搜索了该网站！我找到的所有答案似乎都使用了我无法工作的垂直对齐。在这里问问题总是我最后的手段。您认为我没有搜索答案的假设是不正确的。
是的，我可以告诉你搜索了该网站。 Because this clearly doesn't answer your question at all with pretty much the same title.....就像我说的，快速搜索并不难。我在不到 1 分钟的搜索时间内发现了这一点。
是的...就像我说的，我做到了！如果我能在谷歌上找到答案，我为什么还要浪费时间写一个问题！我猜你为了某种目的而试图避免重复......也许是为了减少网站的大小（我真的不知道你想要达到什么目的）你实际做的是在这里添加一些真正毫无意义的东西（你的评论）如果您不想或无法回答问题，那您不回答怎么办！
我让您知道，在发布问题之前在网站周围进行搜索非常有用。无论如何都认为我的评论毫无意义，但那是不正确的。您应该接受我在第一条评论中所说的话，因为它是有用的信息。如果您将您尝试过的内容发布到您的问题中，这对我们也很有用，这样答案往往会解释您尝试实施的给定方法在哪里出错。

标签： html css

【解决方案1】：

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

试试这个

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

JsFiddle Demo

【讨论】：

最喜欢的解决方案，因为它在大多数设备中都受支持。

【解决方案2】：

您也可以使用vertical-align 一个伪元素（:before 或:after）和一个额外的框（inline-block）来允许内容在几行上换行：请参阅并运行下面的 sn-p。

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

【讨论】：