垂直对齐文本

我有问题垂直对齐文本与CSS。我尝试过所有可能的事情，但它只是不想工作。你可以看到我的演示的jsfiddle演示在这里：垂直对齐文本

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

有了这个代码，它应该工作，但什么是错的。

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

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

来源

2013-11-23 Richard Mišenčík

不要回避要求通过把假的代码使用的jsfiddle链接，而不是你应该只张贴代码。 –

@JoshPowell OKay谢谢。 –

写：

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

Updated Fiddle.

来源

2013-11-23 17:27:47 Hiral

请检查我的更新演示：http://jsfiddle.net/zcU7M/7/。我包括bootstraps css和js文件。 IM在本地有相同的问题，而不是文本对齐，但它们都卡在左侧。 –

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

来源

2013-11-23 17:30:39

请检查我的更新演示：http://jsfiddle.net/zcU7M/7/。我包括bootstraps css和js文件。 IM在本地有相同的问题，而不是文本对齐，但它们都卡在左侧。 –

@RichardMišenčík：???该演示看起来像正常工作。请解释更多。我想帮忙。 –

该部分不跨越整个宽度。它的类型卡在左侧。 –

问题是，标签只在底部增加了一些边距。用萤火虫检查时可以看到这一点。只需添加一个保证金：0您.section伪p选择：

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

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

来源

2014-02-05 14:13:19 SuperNova

For a vertical paragraph align use that: 

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

的jsfiddle例如：Exemple

来源

2014-02-05 14:20:30 SavinienL

全部归功于此链接所有者@Sebastian埃克斯特罗姆Link，请访问通过这个。看到它在行动codepen, 通过阅读上面的文章我也策划了演示fiddle也。

只需3行CSS（不包括供应商前缀），我们可以借助transform：translateY垂直居中，不管我们想要什么，即使我们不知道它的高度。

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

因此，要做到这一点，我们写：

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

这就是你需要的。这是一种类似于绝对位置方法的技术，但有利的一点是，我们不必在父元素或位置属性上设置任何高度。即使在IE9中，它也可以直接使用！

为了使它更加简单，我们可以把它写成与其供应商前缀一个mixin：

来源

2014-08-11 11:39:40 ankitd

垂直对齐文本

回答

相关问题