css 单行文字垂直居中

css实现文字垂直居中,只有一排文字在对象中垂直居中实现,设置css设置单排内容字体垂直居中。

css 单行文字垂直居中,单排字体内容垂直居中如何实现?

要让对象内只有一排(一行)的内容垂直居中,使用css行高line-height)即可实现。

让行高line-height与对象高度height样式值设置相同即可。

div css实例演示代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单排文字垂直居中实例 HTML8</title>
<style>
.exp{height:300px; line-height:300px; border:2px solid #F00}
</style>
</head>
<body>
<div class="exp">
单排文字垂直居中实例
</div>
</body>
</html>

效果截图

CSS 文字垂直居中实现效果截图
CSS 文字垂直居中实现效果截图

更新