如何垂直对齐 Div 中的文本
使用 div 时,有时需要确保其中的文本对齐垂直地在中间。这可以通过多种方法来实现。
使用line-height
如果div有固定的高度,比如50px,则可以简单地使用line-height CSS 属性。
#abc { height: 50px; line-height: 50px; }
这将使文本在 div 内垂直居中。
使用显示属性
对于多行文本,您可以将其换行span 元素并应用显示属性和垂直对齐。
#abc { display: table; width: 100%; } #abc span { display: table-cell; vertical-align: middle; }
使用变换属性
另一种方法涉及将变换属性与translateY()函数一起使用。这对于不支持显示属性的旧浏览器特别有用。
#abc { position: relative; } #abc p { position: absolute; top: 50%; transform: translateY(-50%); }
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3