margin: 0 auto;和text-align: center;的区别

最新推荐文章于 2022-05-12 11:21:03 发布

microcosmv

最新推荐文章于 2022-05-12 11:21:03 发布

阅读量903

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/microcosmv/article/details/52766016

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1，

margin: 0 auto;

一般使用在有宽度的框，使框在浏览器里居中。

2，

text-align: center;

使其中的内容水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        a {
            display: inline-block;
            height: 58px;
            width: 120px;
            background:red;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
    <a class="a1" href="#">导航1</a>
    <a class="a2" href="#">导航2</a>
    <a class="a3" href="#">导航3</a>
    </div>
</body>
</html>

div里的

margin: 0 auto;/*用于设置div块居于浏览器中间*/
text-align: center;/*用于设置div块中的内容（a标签）居于整个div宽度的中间*/

结果预览：
这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

microcosmv

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

比较text-align:center 和margin:0 auto

puddingcsdn的博客

10-24

272

text-align: 设置元素内文本或img标签等一些行内元素的水平对齐方式，作用于元素的子元素。 margin:0 auto ；设置块级元素或者行内块级元素的居中，直接作用于元素本身。注意：浮动、绝对定位、固定定位的盒子失效。相对定位有效，但是如果left值不为0，在水平方向上不会居中，因为偏差了一个left值。对于带有宽度的块级元素，margin auto是不会失效的。 ...

margin:0 auto与text-align:center的基本概念及区别介绍

12-13

基本概念： 1.text-align: 属性规定元素中的文本的水平对齐方式; 　　　　　　该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 　　　　　　一般情况下设置文本对齐方式的时使用此属性。支持值 justify。　　Example: div { text-align: left; } //文本居左对齐　　注释：所有浏览器都支持 text-align 属性；任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 2.margin 是设置对象四边的外延边距，被称为外补丁或外边距。　　Example:

参与评论您还未登录，请先登录后发表或查看评论

margin:0 auto 与 text-align:center 的区别

weixin_34174422的博客

01-22

192

text-align和margin：0 auto；区别

qinduan007的博客

03-26

354

text-align和margin：0 auto；区别 margin：0 auto；是针对块元素进行居中 text-align：针对块元素不会生效，对行内元素及行内块元素才会有用，让内容进行水平居中。

论text-align：center与margin：0 auto的区别。

Merlin2017的博客

04-27

526

text-align：center; margin：0 auto;

CSS教程:水平对齐(text-align)

12-04

**CSS中的`text-align`属性**是用来控制元素内部文本的水平对齐方式，它能够帮助开发者实现各种文本布局效果，让网页设计更加美观和规范。本文将深入探讨`text-align`属性的用法、适用范围、继承性以及在不同浏览器...

如何调整字与背景图一样大小#header .header{ height: 100px; background-image: url("dataView/images/top.png"); background-repeat: repeat; background-position: center; margin: 0 auto; text-align: center; line-height: 30px; font-size: 24px; }

06-09

要调整字与背景图一样大小，可以使用CSS中的... margin: 0 auto; text-align: center; line-height: 30px; font-size: 24px; } ``` 这样就可以让背景图与容器大小相等，并且字体也会随之缩放以适应背景图的大小。

#header .header{ width: 100%; height: 50%; background-image: url("dataView/images/top.png"); background-repeat: repeat; background-position: center; background-size: 100% 100%; margin: 0 auto; text-align: center; line-height: 30px; font-size: 24px; }如何将这段字体和背景图自适应居中同比例放大缩小

最新发布

06-09

margin: 0 auto; text-align: center; line-height: 2em; /* 根据实际情况调整 */ font-size: 3rem; /* 根据实际情况调整 */ } ``` 这样设置后，背景图会按比例缩放以完全覆盖容器，并在容器中居中显示，而文字...

text-align和margin：0 auto的区别

weixin_41223461的博客

04-08

491

text-align：center 是当前元素中内容的排版方式；margin 是设置对象四边的外延边距，被称为外补丁或外边距；区别：设置文本或img标签等一些内联对象； margin:0 auto设置块元素的居中 ...

margin auto;与text-align:center;的区别

sky_sea_desert_me的专栏

09-26

648

margin auto: 是使自身在浏览器内居中，需要配合宽度使用：（只有自身有作用） text-align:center: 针对当前下所有的文本内容居中（是对里面的内容例img 各种文本）相同点：这两个在元素浮动（fl re ab fi）的情况下，是不能对元素起作用的当 position: absolute 时，元素会向父级递归寻找 position 属性不为 static

text-align:center 和margin:0 auto的区别

zheng_cong的博客

07-05

8949

基本概念： 1.text-align: 属性规定元素中的文本的水平对齐方式; 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本水平对齐方式; 一般情况下设置文本对齐方式的时使用此属性。支持值 justify。Example: div { text-align: left; } //文本居左对齐注释：所有浏览器都支持 text-align 属性；任何的版本的 Internet E

水平垂直居中，text-align 、margin和line-height的相关用法

MY1942966637的博客

10-18

905

text-align 、margin与line-height 1、text-align:center; 设置块级元素包括行内块元素（有确定宽度）内文本水平居中对齐方式；设置行内块元素（包括由display:inlineblock转化的行内块元素，但是不包括浮动隐式转化的行内块元素）在父盒子内水平居中对齐；例：给父盒子div添加属性text-align:center；时，当子元素a通过displ...

margin:0 auto；居中和text-align:center；居中的区别

dcyxlj的博客

01-11

983

text-align:center设置为文本或img标签等一些内联对象（或与之类似的元素）的居中。 margin:0 auto是设置块元素（或与之类似的元素）的居中。像表格元素的文字居中用text-align:center，表格整体居中用margin:0 auto， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X

css:margin:100px auto；居中效果不起作用(附元素显示模式总结)

QWxixi的博客

11-11

3006

如果该元素是:display:inline-block;那么margin:100px auto;不会有居中效果。首先复习一下block、inline、inline-block的区别 block 块元素，如div 独占一行，下一个元素另起一行可以设置宽度和高度，默认情况下宽度是父级元素的宽度，如果设置更小的宽度，依然独占一行可以设置margin和padding 是一个容器盒子，里面可以放行内元素和块级元素 inline 行内元素，如span 在一行中可以有多个行内元素，直到该行放不下了，再另起

（四）盒子模型之外边距

weixin_47481102的博客

05-12

2775

1.外边距 margin属性用于设置外边距，即控制盒子和盒子之间的距离。属性作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 margin简写方式代表的意义跟padding完全一致。如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

04.CSS中margin的使用技巧

大大打打的博客

06-26

751

一.水平居中 1.设置margin属性为： 2.距离上100px，左右自动，距离下边距100px margin: 100px auto 100px; 二.margin实现贴边： 1.在HTML中body自带的CSS样式有8px的margin 2.将HTML中body自带的margin设置为0： body{ margin:0; } 3.再将需要贴边的内容margin再次设置为0即可贴边三.将margin属性设置为负数实现重叠： ...

margin: 0 auto 水平居中原理

辰辰沉沉大辰沉

07-14

6664

在 CSS 居中布局界，这可以说是一个烂梗了。但如果继续追问其原理，很多人就语焉不详了。**网络中很多文章有两个问题：描述不全面或者延伸太广，难以聚焦，时间一长容易遗忘**。所以写这篇文章的目的是在收敛知识扩展面的同时又能抓住要点，就算时间久了也可以从要点出发把整个原理。

盒子模型关于嵌套关系、margin：0 auto与text-align区别

Methun

03-15

1459

1.如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来 2.如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性 3.在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin margin本质上是用于控制兄弟关

margin:0 auto;和margin:0px;区别在哪里？

evilcry2012的专栏

05-21

3444

margin:0 auto;和margin:0px;区别在哪里？ 2010-08-02 23:00nnnn123nnn | 分类：编程语言 | 浏览12412次分享到： 2010-08-02 23:11 提问者采纳 margin:0 auto;相当于margin:0 auto 0 auto;即上下是0，左右是自动。 margin: