垂直对齐文本答案

【问题标题】：Vertically align text垂直对齐文本
【发布时间】：2014-08-11 20:11:49
【问题描述】：

我在用 CSS 垂直对齐文本时遇到问题。我可能已经尝试了一切，但它只是不想工作。你可以在这里看到我的演示 jsfiddle 演示：

.section {
    text-align: center;
    vertical-align: middle;
    display:table-cell;
}

有了这段代码，它应该可以工作，但出了点问题。

我该如何解决这个问题？提前致谢。

编辑：更新的演示：http://jsfiddle.net/zcU7M/7/

【问题讨论】：

不要通过放入错误代码来避免使用 jsfiddle 链接的要求，而应该只发布代码。
@JoshPowell 好的，谢谢。

标签： css text alignment center

【解决方案1】：

写：

.section {
    display: table-cell;
    vertical-align:middle;
}

Updated Fiddle.

【讨论】：

请查看我更新的演示：jsfiddle.net/zcU7M/7。我包括引导 css 和 js 文件。 IM 在本地也有同样的问题，不是文本对齐，而是全部卡在左侧。

【解决方案2】：

.section 需要display: table-cell

.section {
    height: 200px;
    background:#ccc;
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
    vertical-align: middle; 
    display:table-cell;
}

display:table-cell 允许元素垂直对齐子元素，因此它必须在父元素上才能使子元素垂直对齐。

这是Working Demo。

【讨论】：

请查看我更新的演示：jsfiddle.net/zcU7M/7。我包括引导 css 和 js 文件。 IM 在本地也有同样的问题，不是文本对齐，而是全部卡在左侧。
@RichardMišenčík：？？？该演示看起来工作正常。请进一步解释。我想帮忙。
该部分没有跨越整个宽度。它有点卡在左侧。
将 .container{width:auto;} 添加到您的 CSS。出于某种原因，您 bootstrap.min.css 尝试将 .container 的宽度设置为 1170px 并且您需要覆盖它。看到这个updated JSFiddle。
你确定没问题吗？它不会在其他地方或其他地方破坏一些代码吗？我可以以某种方式更改标记，这样它就可以工作了吗？

【解决方案3】：

For a vertical paragraph align use that:

p { 
      height:200px;
      line-height:200px;
      text-align:center;
      vertical-align: middle; 
    }

JSFiddle 示例：Exemple

【讨论】：

【解决方案4】：

问题是，

-Tag 只是在底部添加了一些边距。在使用 firebug 进行检查时，您可以看到这一点。只需在 .section p 选择器中添加一个边距：0：

.section p {
    font-size: 15px;
    font-family: Arial;
    font-style: italic;
    margin: 0;
}

http://jsfiddle.net/zcU7M/22/

【讨论】：

【解决方案5】：

所有功劳归功于此链接所有者@Sebastian Ekström Link，请通过此链接。看到它在行动codepen，通过阅读上面的文章，我还创建了一个演示 fiddle。

只需 3 行 CSS（不包括供应商前缀），我们就可以借助 transform: translateY 垂直居中任何我们想要的东西，即使我们不知道它的高度。

CSS 属性变换通常用于旋转和缩放元素，但通过它的 translateY 函数，我们现在可以垂直对齐元素。通常这必须通过绝对定位或设置行高来完成，但这些需要您知道元素的高度或仅适用于单行文本等。

因此，为此我们编写：

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

这就是你所需要的。它是一种类似于绝对位置方法的技术，但好处是我们不必在元素上设置任何高度或在父元素上设置位置属性。它开箱即用，即使在 IE9 中也是如此！

为了更简单，我们可以将其编写为带有供应商前缀的 mixin：

【讨论】：