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

css中两种居中方式text-align:center和margin:0 auto 的使用场景的更多相关文章

  1. 讨论CSS中的各类居中方式

    今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...

  2. css的两种引用方式 link和@import

    学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...

  3. Vue中两种传值方式

    第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取

  4. css中三种隐藏方式

    1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black  显示 display:none  隐藏 3.vis ...

  5. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  6. C++的两种实例化方式

    C++中,类有两种实例化方式.一种是有new关键字,一种没有new关键字.那么,这两种实例化方式有什么区别呢? A a;//(1) a存在于栈上 A* a = new A();//(2) a存在于堆中 ...

  7. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中（转）

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

  8. Ajax中的get和post两种请求方式的异同

    Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.   1. get是把参数数据队列加到提交表单的A ...

  9. 细说java中Map的两种迭代方式

    曾经对java中迭代方式总是迷迷糊糊的,今天总算弄懂了.特意的总结了一下.基本是算是理解透彻了. 1.再说Map之前先说下Iterator: Iterator主要用于遍历(即迭代訪问)Collecti ...

随机推荐

  1. [BUUCTF]REVERSE——[GKCTF2020]BabyDriver

    [GKCTF2020]BabyDriver 附件 步骤: 例行检查,64位程序,无壳 64位ida载入,检索程序里的字符串,看到提示flag是md5(input),下方还看到了类似迷宫的字符串 找到关 ...

  2. 一文详解TDSQL PG版Oracle兼容性实践

    TDSQL PG版分布式关系型数据库,是一款同时面向在线事务交易和MPP实时数据分析的高性能HTAP数据库系统.面对应用业务产生的不定性数据爆炸需求,不管是高并发交易还是海量实时数据分析,TDSQL ...

  3. ICCV2021 | Tokens-to-Token ViT:在ImageNet上从零训练Vision Transformer

    ​  前言  本文介绍一种新的tokens-to-token Vision Transformer(T2T-ViT),T2T-ViT将原始ViT的参数数量和MAC减少了一半,同时在ImageNet上从 ...

  4. Django常用的QuerySet操作

    在这里我根据是否支持链式调用分类进行介绍 1. 支持链式调用的接口 all 使用频率比较高,相当于SELECT * FROM table 语句,用于查询所有数据. filter 使用频率比较高,根据条 ...

  5. LuoguP7870 「Wdoi-4」兔已着陆 题解

    Content 对一个栈执行如下操作: 1 l r:依次向栈里面弹入 \(l,l+1,\dots,r-1,r\). 2 k:依次从栈里面弹出 \(k\) 个数,并求出所有弹出的数的和. 数据范围:\( ...

  6. LuoguP7375 [COCI2018-2019#5] Jarvis 题解

    Content 有 \(n\) 架无人机,每架无人机都有一个当前属性值 \(a_i\) 和出战属性值 \(b_i\).你可以给每架无人机的当前属性值同时加一个数 \(x\)(但只能做一次),使得能够出 ...

  7. CF1494B Berland Crossword 题解

    Content 有一种叫做 Berland crossword 的拼图游戏.这个拼图由 \(n\) 行 \(n\) 列组成,你可以将里面的一些格子涂成黑色.现在给出 \(T\) 个这样的拼图,每个拼图 ...

  8. java 理论基础 类的初始化(加载、连接(验证、准备、解析)、初始化)

    一个进程就有一个JVM,每个进程之间资源独立 当调用java命令来启动某个Java程序的时候,该命令创建一个独立的进程来运行我们的Java程序.而这个独立的进程里面就包含一个Java虚拟机.不管该程序 ...

  9. nim_duilib之virtualListbox用法(22)

    概述 本文将介绍virtualListbox的用法. 更多请参考源码. 一个样式 样式丑了点,勿喷. 重写函数 使用virtualListbox, 需要一个派生类(继承自基类VirtualListIn ...

  10. Sentry 开发者贡献指南 - SDK 开发(事件负载)

    内容整理自官方开发文档 系列 Docker Compose 部署与故障排除详解 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentr ...