我知道当文本高度已知时如何在 div 中垂直对齐文本中心。假设文本的高度是 20px。
用 span 包裹文本。样式 div 和跨度。
div {
position: relative;
}
span {
display: block
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
}
现在我想响应式地对齐文本。我想要的是文本的字体大小与正文的高度成比例。假设我有以下风格:
body {
font-size: 100%;
}
span {
font-size: 1.5em;
}
然后我会在窗口大小改变时改变 body 的字体大小。在这种情况下,文本的高度是不确定的。那么如何让文字居中垂直对齐呢?
我知道我可以使用 JavaScript 动态更改跨度的高度和边距顶部。但是我必须在窗口大小更改后执行此操作。然后有可能窗口大小发生变化,然后用户看到文本不在中间,然后执行 JS 代码,文本跳到 div 的中间。这可能不是可接受的解决方案。
想知道有没有纯CSS的解决方案
我想我可以使用下面的样式来垂直对齐文本中心。
div {
display: table-cell;
vertical-align: middle;
}
但使用此解决方案时,div 的边距无法正确呈现。而且语义不对。
那么有没有完美的解决方案呢?
最佳答案
另一种没有表格显示属性的纯 CSS (CSS3) 解决方案是使用 transform: translateY() 属性。
您需要一个容器 div 和用于文本的内部跨度:
HTML
<div id="container">
<span>Your Text</span>
</div>
CSS
#container{
position: relative;
}
#container span{
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Your font-size CSS */
}
JsFiddle 示例: https://jsfiddle.net/a0m4xnex/1/
您也可以使用与 translateX 相同的水平居中策略。
关于javascript - 文本如何响应地在 div 中垂直居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19485560/