CSS垂直对齐div中的文本答案

【问题标题】：CSS vertical align text in divCSS垂直对齐div中的文本
【发布时间】：2017-04-16 17:48:35
【问题描述】：

关于https://jsfiddle.net/postiffm/74cxr092/

> <div id="Tagline">
>     I'm in the center.
>     <div id="TaglineLeft"></div>
>     <div id="TaglineRight"><a href="tel:1-734-123-4567">I am a phone #</a></div> </div>

如何对齐 TaglineRight 中的文本，使其上方有一些空间，就像中间部分的文本一样？我尝试了一些填充和边距的东西，但似乎没有任何效果。

谢谢。

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

而不是玩弄位置：绝对/相对。考虑使用 display:flex

检查这个解决方案

#Tagline {
  color: white;
  font-weight: normal;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 10px;
  border: 0 solid #ff9706;
  border-radius: 7px;
  background-color: #ff9706;
  display: flex;
  height:30px;
    line-height: 30px;
  justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
  color: white;
  height: 100%;
  width: 30%;
  border-radius: 7px;
  text-align: center;

}
#TaglineLeft {

  margin-top: 0px;
  background-color: #6673aa;
  order: -1;

}
#TaglineRight {
  border: 0 solid #7e922e;
  background-color: #7e922e;
}
#TaglineRight a {
  color: white;
  letter-spacing: 1px;
  text-decoration: none;
}

<div id="Tagline">
  I'm in the center.
  <div id="TaglineLeft">left line</div>
  <div id="TaglineRight"><a href="tel:1-123-123-1234">I am a phone #</a>
  </div>
</div>

希望对你有帮助

【讨论】：

几乎可以工作，而且我学到了一些关于 flex 指令的知识。但是，它在蓝色和绿色周围显示了橙色边框，这不是我想要的。谢谢你的时间。我很感激。
接受 Connor 的解决方案，这是对您问题的最简单直接的答案。但与其玩位置，不如使用 display:flex 进行布局

【解决方案2】：

一种老式的方式是将子元素视为表格数据，将其设置为display: table-cell、vertical-align: middle; 并将其父元素设置为display: table;。这样，您可以将父元素的高度更改为您喜欢的任何/任何时间，并且子元素将始终保持垂直对齐。不像 CSS3 解决方案，它也可以在旧浏览器中工作，当然也可以跨浏览器支持。 https://jsfiddle.net/ryf0w7rp/ - 尝试将“#Tagline”元素的高度从 20px 更改为其他值并查看结果。

*如果您不希望主包装元素使用display: table，那么您可以创建另一个级别的元素以使用display: table。

*对于示例，我只为具有内部 <a> 元素的“#TaglineRight”元素制作了解决方案。要使其他元素的工作方式相同，请添加相同的结构并将 CSS 设置为正确的元素。

【讨论】：

【解决方案3】：

#TaglineLeft, #TaglineRight {
 position: absolute;
 color: white;
 font-weight: normal;
 text-align: center;
 height: 100%;
 width: 30%;
 top: 0;
 border-radius: 7px;
 height: 20px;
 padding: 5px;
}

您可以将 height: 20px; 和 padding: 5px; 添加到 #TaglineLeft, #TaglineRight { 类

【讨论】：

对不起。实际上，此解决方案确实有效jsfiddle.net/postiffm/74cxr092/5 确实有效，但前提是 height: 20px 和 padding: 5px 在 height: 100% 语句之后。

【解决方案4】：

添加行高：30px；到#TaglineRight a

【讨论】：

这是最简单的解决方案。谢谢！效果很好。