display: table-cell属性

最新推荐文章于 2024-07-26 08:00:00 发布

绿色的布鲁布鲁

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量266

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sinat_39303863/article/details/115305144

版权

CSS display:table-cell 文本居中垂直居中 CSS布局

关键词由CSDN通过智能技术生成

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

display: table-cell属性

display: table-cell此属性使用可以实现单行或多行文本垂直居中的效果。表现类似td元素。
使用过程中注意如下：
1.不要与float:left；position:absolute；一起使用；
2.margin设置无效，响应padding设置；

单行或多行文字垂直居中：
vertical-align:middle–使文字内容垂直居中
text-align: center–使文本居中对齐
border: 1px solid #5F9EA0—外框实线1px，颜色为#5F9EA0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 500px;
				height: 500px;
				display: table-cell;
				text-align: center;
				vertical-align: middle;
				border: 1px solid #5F9EA0;
			}
		</style>
		
	</head>
	<body>

		<p>
			排序1<br>
			排序2<br>
		</p>	
	</body>
</html>

效果展示：
在这里插入图片描述

绿色的布鲁布鲁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
display: table-cell属性

display: table-cell属性display: table-cell此属性使用可以实现单行或多行文本垂直居中的效果。表现类似td元素。使用过程中注意如下：1.不要与float:left；position:absolute；一起使用；2.margin设置无效，响应padding设置；单行或多行文字垂直居中：vertical-align:middle–使文字内容垂直居中text-align: center–使文本居中对齐border: 1px solid #5F9EA0—外框实线1
复制链接

扫一扫