<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素内容的垂直方式和垂直居中方法</title>
<style>
.a{
width: 100%;
height: 100px;
border: 1px solid black;
line-height: 100px;
text-align: center;
}
.a span{
font-size: 10px;
color: red;
vertical-align: super;
}
.b{
width: 100%;
height: 200px;
border: 1px solid black;
display: table;
text-align: center; /* 父级转换为表格 */
}
.ne{
vertical-align: middle;
display: table-cell; /* 子元素转换为单元格 */
}
</style>
</head>
<body>
<!-- vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|长度|百分比; -->
<!-- 只对行内元素有效,对块级元素无效 -->
<div class="a">
单行文本垂直<span>居中</span>
</div>
<div class="b">
<div class="ne">
<h4>多行文本垂直</h1>
<h5>多行文本</h2>
</div>
</div>
</body>
</html>
多行文本垂直居中
最新推荐文章于 2023-02-28 22:13:56 发布