行内元素和块状元素的水平居中设置

最新推荐文章于 2023-12-09 14:54:44 发布

夏末_前端有意思

最新推荐文章于 2023-12-09 14:54:44 发布

阅读量1.2k

点赞数

分类专栏： css布局文章标签： css水平居中

本文链接：https://blog.csdn.net/xiamocsdn/article/details/89879086

版权

我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别
三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。
在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？

行内元素的水平居中设置

行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现：
我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素：

<!DOCTYPE html>
<html>
<head>
	<title>前端试题</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="前端试题.css">
</head>
<body>
	<div>
		<span>这是一个行内元素</span>
	</div>
</body>
</html>

父元素div的css样式当中，用text-align: center;对span元素进行“水平居中”设置。
为了突出显示父元素div和子元素span之间的位置关系，设置一下背景颜色：

div{
	width: 200px;
	height: 100px;
	background-color: yellow;
	text-align: center;
}
span{
	background-color: orange;

最低0.47元/天解锁文章

夏末_前端有意思

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
行内元素和块状元素的水平居中设置

我在上一篇文章里总结了一下块状元素、内联元素、内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高、内外间距。在这个前提下，我们应该怎么设置元素在水平方向上的居中呢？行内元素的水平居中设置行内元素的水平居中有一个通用的方法：通过在其父元素中设置text-align:center来实现：我们给出一个html文件，写入一个div块状元素，包裹一个span内联元素：&l...
复制链接

扫一扫