您的位置:首页 > Web前端 > CSS

css中两种居中方式text-align:center和margin:0 auto 的使用场景

2022-01-14 16:22 1411 查看

##关于使用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的区间

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: