我有一个div设置为display:block(90px高度和宽度),里面有一些文本
我需要文本在垂直和水平方向的中心对齐
我尝试了文本对齐:居中,但它不执行垂直居中部分,因此我尝试了垂直对齐:居中,但不起作用
有什么想法吗
如果是一行文本和/或图像,那么很容易做到。只需使用:
文本对齐:居中;
垂直对齐:中间对齐;
线高:90px;/*和你的潜水高度一样*/
就这样。如果它可以是多行,那么它就有点复杂了。但我们有解决办法http://pmob.co.uk/. 寻找“垂直对齐”
因为他们往往是黑客或添加复杂的div。。。我通常用一个有一个单元格的表格来做。。。使它尽可能简单
2020年更新:
除非您需要使其在早期浏览器(如Internet Explorer 10)上工作,否则您可以使用flexbox。它受到当前所有主流浏览器的广泛支持。基本上,容器需要指定为柔性容器,并沿其主轴和横轴居中:
容器{
显示器:flex;
证明内容:中心;
对齐项目:居中;
}
要指定子项的固定宽度(称为“弹性项”),请执行以下操作:
#内容{
flex:0120px;
}
例如:http://jsfiddle.net/2woqsef1/1/
要对内容进行收缩包装,则更简单:只需从flex项中删除flex:…行,它就会自动进行收缩包装
例如:http://jsfiddle.net/2woqsef1/2/
以上示例已经在主要浏览器上进行了测试,包括MS Edge和Internet Explorer 11
如果您需要自定义它,请注意一点:在flex项内部,因为此flex项本身不是flex容器,所以CSS的旧的非flexbox方式可以按预期工作。但是,如果向当前flex容器中添加其他flex项,则这两个flex项将水平放置。要使它们垂直放置,请添加flex-direction:列到flex容器。这就是它在flex容器及其立即子元素之间的工作方式
还有另一种居中方法:不为柔性容器的主轴和横轴上的分配指定中心,而是在柔性项目上指定边距:自动,以在所有四个方向上占用所有额外空间,而均匀分布的边距将使flex项在所有方向居中。除非存在多个弹性项,否则此选项有效。此外,此技术在MS Edge上有效,但在Internet Explorer 11上无效
2016/2017年更新:
更常见的方法是使用transform,即使在Internet等较旧的浏览器中也能很好地工作;探索者;10和互联网;探索者;11它可以支持多行文本:
位置:相对;
最高:50%;
转化:translateY(-50%);
例如:https://jsfiddle.net/wb8u02kL/1/
要收缩包裹宽度,请执行以下操作:
上面的解决方案为内容区域使用了固定的宽度。要使用收缩包装宽度,请使用
位置:相对;
浮动:左;
最高:50%;
左:50%;
转换:翻译(-50%,-50%);
例如:https://jsfiddle.net/wb8u02kL/2/
如果支持互联网;探索者;如果需要10,则flexbox将不起作用,而上述方法和行高方法将起作用。否则,flexbox将完成这项工作