垂直对齐两行文本答案

【问题标题】：Vertical align two lines of text垂直对齐两行文本
【发布时间】：2015-02-24 03:12:20
【问题描述】：

我在 div 中垂直对齐文本时遇到问题。我已经尝试过我在其他帖子上阅读过的建议。我确信我做错了什么很明显，但它不起作用。

<div class="banner">
  <div class="span10"> <!-- bootstrap -->
    <div class="banner-text">
        <div class="pull-left">Here is the first line of text i want to center</div>
        <div class="pull-left">Here is the second line of text i want to center</div>
        <div class="clear"></div>
    </div>
</div>

.banner{
margin-top:-2;
height: 70px;
background-color: #cf0000;
color: white;
height: 70px;
position: relative;
}

.banner-text{
display: block;
vertical-align: middle;
}

.pull-left {
display: block;
}

【问题讨论】：

vertical align 文字是什么意思？ - 这个？ - jsfiddle.net/o6gqvtoo/5
另见 - stackoverflow.com/questions/79461/…
@Paulie_D 如果我更改行高不起作用。但是是的，这就是我想要的
显然它确实有效，但也许您需要详细说明为什么行高不起作用...您有多行吗？
这并没有解释为什么需要较小的行高。也许您可以提供一张应该是什么样子的图片？

标签： html css vertical-alignment

【解决方案1】：

vertical-align 有点奇怪。

一般你应该在元素本身上使用它，而不是它们的容器，它实际上只适用于 inline 和 inline-block 元素。

但即便如此，它也可能不会像（我猜）你想要的那样垂直居中。因此，一个小技巧是将您的line-height 设置为与您的height 相同，瞧：

http://jsfiddle.net/06c7eosv/

注意：使用 display: inline-block 和 width: 50% 你的元素之间不能有任何空白html

好：

<div>...</div><div>...</div>

不好：

<div>...</div>
<div>...</div>

【讨论】：

这很接近。你能把这两行放在不同的行上吗？
查看我添加的照片
@CamSonaris 哦，如果这就是你想要的，只需在容器周围设置一些填充，让它自己调整到文本大小。这里jsfiddle.net/owtw17re

【解决方案2】：

根据提供的图像和有限的可用信息，我认为最好的选择是绝对定位横幅文本包装器 div

.banner {
  margin-top: -2;
  height: 70px;
  background-color: #cf0000;
  color: white;
  height: 70px;
  position: relative;
}
.banner-text {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pull-left {
  display: block;
}

<div class="banner">
  <div class="span10">
    <!-- bootstrap -->
    <div class="banner-text">
      <div class="pull-left">Here is the first line of text i want to center</div>
      <div class="pull-left">Here is the second line of text i want to center</div>
    </div>
  </div>
</div>

也就是说，如果两个内部 div 可以组合，其他选项可能可用。

【讨论】：

【解决方案3】：

通常，vertical-align 设置内联级别元素相对于行框的对齐方式。

但是，当应用于表格单元格时，它具有不同的含义：它设置单元格内内容的对齐方式。

因此，您可以使用 CSS 表格：

.banner {
    display: table;
    width: 100%;
}
.banner > .span10 {
    display: table-row;
}
.banner-text {
    display: table-cell;
    vertical-align: middle;
}

.banner{
  margin-top:-2;
  height: 70px;
  background-color: #cf0000;
  color: white;
  height: 70px;
  position: relative;
  display: table;
  width: 100%;
}
.banner > .span10 {
  display: table-row;
}
.banner-text{
  display: table-cell;
  vertical-align: middle;
}
.pull-left {
  display: block;
  /* float:left; */
}

<div class="banner">
  <div class="span10"> <!-- bootstrap -->
    <div class="banner-text">
      <div class="pull-left">Here is the first line of text i want to center</div>
      <div class="pull-left">Here is the second line of text i want to center</div>
      <div class="clear"></div>
    </div>
  </div>
</div>

【讨论】：