从text-align和margin auto说开来

最新推荐文章于 2022-04-14 18:26:50 发布

zdavb

最新推荐文章于 2022-04-14 18:26:50 发布

阅读量1.7k

点赞数

分类专栏： HTML&CSS

本文链接：https://blog.csdn.net/zdavb/article/details/48057299

版权

本文探讨了在CSS中实现元素居中对齐时，text-align和margin auto的差异。通过解释盒子模型和文档流的概念，作者指出margin 0 auto常用于块级元素的水平居中，而text-align:center则在父容器中使内联元素和块级元素居中。文章还讨论了内联元素的居中策略，并提到了display属性在转换元素类型中的作用。

摘要由CSDN通过智能技术生成

这是本系列第一篇博客，就多啰嗦两句。被老大强制要求写HTML和CSS，因为之前写过CSS觉得特别的痛苦，那痛苦的原因估计很多人也都遇到过，就是感觉有些东西是不可控的，如果某一次能把东西放在了指定的位置上，那是good luck，但是下次就不一定有这么好的运气了。
今天就遇到一个问题，在一个div里面有一个button，我希望让这个button居中，居中嘛，就用了margin，结果是怎么都不好使，结果后来用的text-align:center才把这个button居中了。

<style type="text/css">
    #id{
        width:300px;
        text-align:center;------正确
    }
    #btn{

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zdavb

关注关注

0
点赞
踩
3

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS学习中|对比如何使用text-align = center和margin：auto

weixin_47788265的博客

07-24

323

margin : auto 是为块级元素设置外边距，通过将左右外边距设置相同的值使元素水平居中代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com.

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

weixin_30496751的博客

08-08

149

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

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

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

Olliverzhang的博客

06-12

606

两者都是处理水平居中样式时用到的。 text-align:center是处理内联元素时的居中,用在外层的div中，也就是说其作用是设置div中的内联元素在div中水平居中。 margin:auto是为块级元素设置外边距，通过将左右外边距设置相同的值使元素水平居中。 ...

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

晨曦的博客

02-09

554

text-align: 属性规定元素中的文本的水平对齐方式;该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式；一般情况下设置文本对齐方式的时使用此属性。支持值 justify。而margin 是设置对象四边的外延边距，被称为外补丁或外边距。如 div { margin:30px 20px 10px 40px; } // 表示对象外边距，顶30px、右20px

margin和text-align以及align

weixin_30919571的博客

01-15

274

margin和text-align是css样式，align是html的 <style> .test { width: 400px; height: 200px; background: green; } .rectangle { width: 200px; ...

请用 Express 框架实现如下功能:当单击上图中某本图书名称后，显示该图书详细信息，如下图所示: 左侧是封面图，右侧最上面是书名，有一条hr横线分割开来，下面是：作者：出版社：淘书价格：内容简介： bookInfo.html模板文件: <html lang="en"> <head> <title><%=title%></title> <link rel="stylesheet" type="text/css"href="/stylesheets/divBar.css"> <style type="text/css"> divbook/width:90%;margin:10px auto? divpictureffloat:left;text-align: center;width:20%:height:800px;position: relative;top: 20px)divinfofwidth: 80%;height:800px;padding-left: 50px;position: relative; top: 20px;)abookname/display: block:height: 30px:line-height: 30px:font-size: 20px:color: bluea.bookname:hoverftext-decoration: underline n: center; span.pricefdisplay: inline-block;height: 30px;line-height: 30px;font-size:20px;color: red;a.apfdisplay:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: bluespan.other(display:inline-block;height: 30px;line-height: 30px;font-size: 15px;color: blackspan.abstractfdisplay: block;font-size: 15px;color: black} </style> </head> <body> 补充这里的代码： </body>

05-26

margin:10px auto;} div.picture {float:left;text-align: center;width:20%;height:800px;position: relative;top: 20px;} div.info {width: 80%;height:800px;padding-left: 50px;position: relative; top: 20px...

css 入场动画_CSS3 从中间溅开来的页面入场动画

weixin_39717825的博客

12-19

327

CSS语言：CSSSCSS确定body {background-color: #191919;font-family: 'Open Sans', sans-serif;}.text {opacity: 0;position: absolute;z-index: 7;text-align: center;margin: -50px 0 0 -150px;width: 300px;height: 10...

制作一个页面，使图像的说明文字在图像之中，请注意文字颜色的选择，使用户能把图像和文字区分开。

06-06

margin: 0 auto; } .image { display: block; max-width: 100%; height: auto; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ...

html制作一个页面，使图像的说明文字在图像之中，请注意文字颜色的选择，使用户能把图像和文字区分开。

06-06

margin: 0 auto; } .image { display: block; max-width: 100%; height: auto; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ...

CSS 居中之text-align与margin的区别

weixin_43519121的博客

07-13

1960

区分 text-align与margin两种对齐的方式 text-align text-align 属性规定元素中的文本的水平对齐方式。注意：其文本内容也包括其所有子孙元素中的文本 margin:0 auto 我们先理解一下auto，其含义因元素类型和上下文而异，在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。 “自动”占用可用空间** 这是我们利用auto最常见的用法。通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此

text-align和margin：0 auto的区别

weixin_41223461的博客

04-08

475

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

Android布局中margin,padding,align的区别

柯小帅的博客

07-03

1820

一、Margin的用法 android:layout_marginxxx(xxx指的是left,right,top,bottom等)的用法是指当前组件距离其父组件在XXX方向上的边的距离（边距）例如： android:layout_marginleft=“30px” -------当前组件距离父组件左边边界30像素二、Padding的用法 android:paddingxxx(xxx指的是...

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

dcyxlj的博客

01-11

964

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

Android关于margin、align、padding等一些常用的属性

a1010012805的博客

05-23

2849

layout_margin：该属相的意思是该控件与父控件边缘之间的距离，其中包括四个方向，layout_marginLeft、layout_marginTop、layout_marginRight、layout_marginBottom，单位是dp。除此之外，还有layout_marginStart、layout_marginEnd，这两个属性没有用到过，具体效果不明确。 layout_alig

如何使用text-align:center和 margin:0 auto 让img标签居中

weixin_45999422的博客

04-14

1868

让img标签居中的两个解决方法

在HTML5中text-align,CSS中使用text-align、margin：0 auto居中的示例代码

weixin_39577289的博客

06-18

192

CSS中使用text-align、margin：0 auto居中在使用text-align或者是margin：0 auto进行居中时，可能会出现无效的情况，下面用两个例子来讲解和解决问题示例1：让内联元素居中使用text-align假设我要让图片在其父组件中居中显示。那首先，父组件应该是块元素(div、p…)，然后在父组件中添加属性text-align:center，随后此组件中的内联元素(spa...

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

MY1942966637的博客

10-18

882

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

CSS属性总结（二）：text, font, margin, padding

web开发自学

12-05

316

文本 color 设置元素内文本的颜色。值可以取任意CSS支持的颜色值，包括颜色名称（如red, blue）、十六进制颜色值（如#ff0000）或者rgb颜色值（如rgb(255, 0, 0)）。默认为#000000，黑色。 direction 设置元素内文本的书写方向。取值有ltr（从左至右）和rtl（从右至左）。默认为ltr。 letter-spacing 设置相较默认状态下增...

margin 0 auto text-align