css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用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 的使用场景的更多相关文章
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- css的两种引用方式 link和@import
学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...
- Vue中两种传值方式
第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取
- css中三种隐藏方式
1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black 显示 display:none 隐藏 3.vis ...
- 引入外部CSS的两种方式及区别
1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...
- C++的两种实例化方式
C++中,类有两种实例化方式.一种是有new关键字,一种没有new关键字.那么,这两种实例化方式有什么区别呢? A a;//(1) a存在于栈上 A* a = new A();//(2) a存在于堆中 ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
- Ajax中的get和post两种请求方式的异同
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别. 1. get是把参数数据队列加到提交表单的A ...
- 细说java中Map的两种迭代方式
曾经对java中迭代方式总是迷迷糊糊的,今天总算弄懂了.特意的总结了一下.基本是算是理解透彻了. 1.再说Map之前先说下Iterator: Iterator主要用于遍历(即迭代訪问)Collecti ...
随机推荐
- Hyper-v安装Centos7
开篇语 知识库地址:https://azrng.gitee.io/kbms 介绍 可以让你在你的电脑上以虚拟机的形式运行多个操作系统(至于为什么选择这个,主要是系统已经自带了,所以能不装其他我就先不装 ...
- 摘要任务工期计算(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 先说一个好消息:摘要工期是可以自动计算的. 比如A1.A2.A3.A4四个任务,工期如下图安排: 而他们的摘要任务,就不再 ...
- CF935B Fafa and the Gates 题解
Content 一个动点 \(F\) 一开始在平面直角坐标系上原点的位置,随后它会移动 \(n\) 次,每次只能向上走或者向右走 \(1\) 个单位,求经过直线 \(y=x\) 的次数. 数据范围:\ ...
- curl常用选项
下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos.org 通过-o/-O选项保存下载的文件到指定的文件中:-o:将文件保存为命令行中指定的文件名 ...
- 自己常用的CMake用法总结
欢迎指正 CMake : A.download : https://cmake.org/download/ B.tutorial: https://cmake.org/cmake-tutorial/ ...
- 【LeetCode】576. Out of Boundary Paths 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 状态搜索 记忆化搜索 相似题目 参考资料 ...
- GCD is Funny(hdu 5902)
GCD is Funny Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- TensorFlow.NET机器学习入门【6】采用神经网络处理Fashion-MNIST
"如果一个算法在MNIST上不work,那么它就根本没法用:而如果它在MNIST上work,它在其他数据上也可能不work". -- 马克吐温 上一篇文章我们实现了一个MNIST手 ...
- A pure L1-norm principal component analysis
@ 目录 问题 细节 的损失函数 算法 投影 坐标系 载荷向量 A pure L1-norm principal component analysis 虽然没有完全弄清楚其中的数学内涵,但是觉得有趣, ...
- vue项目发布后,线上运行时刷新404
修改nginx配置文件 location / { root ... index ... try_files $uri $uri/ /index.html; ---解决页面刷新404问题 } (参考官网 ...