在CSS中div文字垂直居中对齐 - 极悦
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 在CSS中div文字垂直居中对齐

在CSS中div文字垂直居中对齐

更新时间:2022-12-28 10:25:14 来源:极悦 浏览720次

使用 CSS vertical-align 属性将文本垂直居中对齐

要使文本垂直居中对齐,您可以使用 CSS 属性vertical-alignwithcenter作为其值。您还需要使用display:table-cellCSS 属性使文本垂直居中。

向 div 元素添加一些宽度和高度,并将文本也水平居中对齐。要使文本水平居中,您必须使用text-align:center.

<style>
.valigndiv{
	width:200px;
  	height:200px;
  	display:table-cell;
  	text-align:center;
  	background:#ccc;
  	border:1px solid #000;
  	vertical-align:middle;
}
</style>
<div class="valigndiv">This is the Vertically Aligned content.</div>

输出

上面的示例包含带有一些背景颜色的 div 元素。div 元素中的文本位于所需位置。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>