oldoldcoder

关于使用text-align:center和margin:0 auto 两种居中方式的比较

前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚,于是自己决定试一试

1.需要先了解块级元素和行间元素

块级元素有:div(div默认是块级元素),p标签,h1-h6等;
行间元素有:a标签,img标签等
两者区别就是,块级元素可以独占一行,之后的默认存在换行符,行间元素可以多个处于一行内,只有超过外部边框的时候会换行。

2.问题的引出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="frame">
				<img src="背景.jpg" >
		</div>
	</body>
</html>

一个非常简单的测试
得到的界面是:

想要将这个图片居中,我们应该怎么操作。

text-align:center将块中元素向中对齐
margin:0 auto 将外边距设置为上下为0px,左右各占所在框的一半

3.解决方法

思路一:由于div标签是块级元素,所以我认为直接在外层的div中使用text-align:center,就可以将div存在的元素img移动到中间去

选中这一个图片查看,可以看到,这样一个块是占满这一行,它的width应该就是屏幕的宽度
通过设置

<div style="text-align:center;">


实现了要求。
思路二:通过将img变为块级元素后,再通过设置外边距margin来实现要求

<img src="背景.jpg" style="display: block; margin: 0 auto;" >

由于我也是刚学,其实这里还有一些疑问,我觉得当我设置display:block的时候,我在浏览器的开发者工具下查看img元素,蓝色应该会占满每个block的区间

相关文章:

猜你喜欢