css test-align 和 margin 居中什么区别
共同点
test-align 和margin 都可以居中:
test-align:Center.
margin: 0 auto.
很好但是看下区别:
<div style="background:red;text-align: center;">
<div style="background:yellow;width:30%;text-align: center;">
<span>
good
</span>
</div>
</div>
这里我们同样适用text-align,但是呢,span居中了,而div没有居中。
这个时候我们看下概念.
正文
概念
基本概念:
1.text-align: 属性规定元素中的文本的水平对齐方式;
该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;
一般情况下设置文本对齐方式的时使用此属性。支持值 justify。
Example: div { text-align: left; } //文本居左对齐
注释:所有浏览器都支持 text-align 属性;任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
2.margin 是设置对象四边的外延边距,被称为外补丁或外边距。
Example: div { margin: 20px 10px 30px 40px; } // 表示对象外边距,顶20px、右10px、下30px、左40px
区别
1.text-align:center 设置文本或img标签等一些内联对象(或与之类似的元素)的居中。
2.margin:0 auto 设置块元素(或与之类似的元素)的居中。
这两个属性IE与FF的理解也有所不同。我们设置一个段落P,在段落内存在一个图片img标签。
注意
注意:
1.当设置body{text-align:center;}。
在IE中,段落P,图片img同时实现了居中对齐,也就是说text-align:center;同时作用于元素p与元素img。
在FF中,段落P,没有能实现居中对齐,而图片img实现了居中对齐,也就是说text-align:center;作用于img标签,而段落p标签没有起到居中的作用。
2.当设置段落 p {margin:0 auto;}。
在IE与FF中,段落P均实现了居中对齐。图片img由于不是作用对象,所以不会居中对齐。
有三种情况需要说明:
margin:0 auto;的选择器是作用对象,如div,p,而不是body。如果设置:body { margin:0 auto; }将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置,我们最大化窗口将会看到段落并非处于窗口的最左上角。
设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。
设置图片标签img {margin:0 auto;} ,就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果一定要设置,那么先将它的属性转变为块元素,如下面的代码:img
再说明一下,img在渲染的时候有1个像素的空隙,那么可以设置display:inline-block;来解决这个问题。
css test-align 和 margin 居中什么区别的更多相关文章
- css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
- (转)css内边距与外边距的区别,精辟啊
css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知 ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- Qt qss一些伪装态,以及margin与padding区别
伪状态 描述 :checked button部件被选中:disabled 部件被禁用:enabled 部件被启用:focus 部件获得焦点:hover 鼠标位于部件 ...
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- margin居中显示
标签(空格分隔): margin居中 margin居中: 如下图的代码查看: <!DOCTYPE html> <html lang="en"> <he ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS中padding和margin以及用法
CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...
随机推荐
- Java toString的使用
1 package com.bytezreo.objectclass; 2 3 import java.util.Date; 4 5 /** 6 * 7 * @Description Object类中 ...
- (广州南沙)vue知识点整理2021,主要是防止忘记防备快速翻看
/////////////////////////// vue 中使用路由技巧:router //////////////////////////////// 写笔记说明,之前在江门工作 ...
- URLDNS链分析
一.概述 URLDNS 是ysoserial中利用链的一个名字,通常用于检测是否存在Java反序列化漏洞.该利用链具有如下特点: 不限制jdk版本,使用Java内置类,对第三方依赖没有要求 目标无回显 ...
- [VueJsDev] 快速入门 - vscode 设置推荐
[VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html vscode设置推荐 ::: details 目录 目录 v ...
- websocket服务器的创建
就这上篇文章的代码,我们会继续实现以下websocket的协议. 为什么要使用websocket呢? 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平 ...
- apt-get install安装软件时出现依赖错误解决方案
在使用apt-get install安装软件时,经常会遇到如上图所示错误,该错误的意思为缺少依赖软件,解决方案为: aptitude install golang-go
- Welcome to YARP - 3 负载均衡 (Load Balancing)
目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...
- [.NET项目实战] Elsa开源工作流组件应用(二):内核解读
@ 目录 定义 变量 内存寄存器类 寄存器中的存储区块类 变量到存储的映射类 上下文对象 活动上下文(ActivityExecutionContext) 工作流执行上下文(WorkflowExecut ...
- 《Go程序设计语言》学习笔记之map
<Go程序设计语言>学习笔记之map 一. 环境 Centos8.5, go1.17.5 linux/amd64 二. 概念 1) 散列表,是一个拥有键值对元素的无序集合.在这个集合中,键 ...
- 前端 Typescript 入门
前端 Typescript 入门 Ant design vue4.x 基于 vue3,示例默认是 TypeScript.比如 table 组件管理. vue3 官网介绍也使用了 TypeScript, ...