text-align:center设置居中不起作用，text-align、margin： auto区别

最新推荐文章于 2023-02-24 11:07:20 发布
最新推荐文章于 2023-02-24 11:07:20 发布
阅读量6.1k 收藏 6
点赞数 4
分类专栏： 样式（css/js控制） 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46183615/article/details/121582733
版权
本文介绍了在CSS中如何使文字居中，重点讨论了text-align:center属性不起作用的情况，原因是误用了display属性导致样式重置。解决方法是删除不必要的display设置。同时提到了margin：auto适用于整体居中，但需指定宽度。文章还提醒开发者要注重代码质量，避免无用代码。
摘要由CSDN通过智能技术生成

简单的div里面文字居中

问题： 用的text-align: center 不起效果
错误代码：
在这里插入图片描述
在这里插入图片描述
问题原因： 就一个简单的代码，搞了半天发现自己乱用display(根本就不需要布局)，导致居中样式相当于被重置了，so，好好敲代码，别乱写没用的东西
解决：删掉display就OK
在这里插入图片描述
相关内容：
text-align只是让文字元素居中
margin：auto是让整个边框加文字居中（但是必须要设置宽度）

我爱工作&工作love我
关注
专栏目录
关于text-align无法居中的问题
weixin_34055787的博客
10-20 3989
昨天项目，一直出现一个无法居中的问题，最后发现竟然是text-align的问题，才发现自己对text-align的理解还是不够透彻，于是在此再举例分析下。 css中的元素一共有三类：块元素、行内块和内联元素。 三者的区别就是： 　　　　　　　　块元素可以设置宽高，会独占一行； 　　　　　　　　行内块拥有块元素的所有特性，除了无法独占一行； 　　　　　　　　内联元素无法设置宽高，不会独占一...
text-align无法实现内容居中的原因分析及解决办法
qq1722377628的博客
04-14 5865
<div class="loading"> <img src="./loading.png" alt="图片丢失了" /> <span class="text">{{text}}</span> </div> 为了让图片和文字水平垂直方向都居中，我使用stylus（就当CSS理解）如下： .loading po...
div使用text-align:center没效果不起作用
qq_41932272的博客
06-13 4049
div使用text-align:center没效果不起作用 未居中 参考网址：https://blog.csdn.net/JavaZwb/article/details/80028360原因是div为块状元素，所以只需要在div的css代码里设置display:inline或display:inline-block，将块状元素转为内联元素即可。对于块状元素也可以使用margin:0 auto;来控制居中。...
text-align center 无效不起作用
qq_38229938的博客
06-21 8644
因为用了很多的class，经过排查是其中一个class有一个属性float设置了值left引起的， 最后通过覆盖float为none, 问题解决。
设置 text-align: center；line-height:height 居中无效
weixin_30586085的博客
01-09 430
1.设置文字水平居中 内联元素（行内元素）使用：text-align: center；使用后文字仍然没有居中 解决方法：设置width：100%； 块元素使用：margin： 0 auto; 2.设置文字垂直居中 注意：如果设置了border则会出现误差，其次分清楚行距与行高 可以使用伪类元素，设置如下： .text{ width: 16px; height: 16p...
text-align=center 失效原因
weixin_33994429的博客
09-10 1602
text-align属性是针对 内联元素居中得属性设置，对于块状元素使用margin:0 auto;来控制居中； 笔者在设置一个h2标签时设置了text-align:center;但是却始终出现在中间偏左得位置，第一反应是可能样式冲突了，但是经过查找没有发现冲突，而且换了p标签也是不行，最终通过谷歌审查元素功能看到一个user agent style的属性设置 原来浏览器自作主张把h...
让IE也支持margin居中告别text-align:center
09-25
通常，我们有两种主要的方法来实现元素的水平居中：`text-align:center` 和 `margin: auto`。这篇文章将重点讨论如何在Internet Explorer (IE)浏览器中使用`margin: auto`实现居中对齐，以及为什么在某些情况下IE...
margin:0 auto与text-align:center的基本概念及区别介绍
09-25
1. `text-align:center`主要用于内联元素和文本的居中对齐，而`margin:0 auto`则用于块级元素的居中。 2. 在IE浏览器中，`text-align:center`会同时作用于段落`<p>`和内联元素`<img>`，使两者都居中。但在Firefox中...
style="margin-top:0px;display: flex;justify-content: center;text-align: center;"
07-14
text-align: center;" ``` 这段代码中，`margin-top: 0px;` 将会把元素的上边距设置为0像素。`display: flex;` 将会使父元素使用弹性布局。`justify-content: center;` 将会使子元素在水平方向上居中对齐。`text-...
body { text-align: center; padding: 20px; font-family: Arial, sans-serif; }设置左右边距为居中
最新发布
09-12
您提供的CSS代码已经设置了一个元素的文本对齐方式为居中（`text-align: center;`），并且添加了20像素的内边距（`padding: 20px;`），以及指定了字体族为Arial（`font-family: Arial, sans-serif;`）。但是，您提到...
在ie7下css居中样式text-align:center;偏左问题解决方法
12-01
复制代码代码如下: body { text-align:center; } 用ie7打开是居左的。 万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽. 复制代码代码如下: .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .
前端 position: absolute布局 text-align: center失效解决办法
吕氏春秋i
02-24 867
项目ui要求图片上备注文字效果想实现这种效果可以使用布局但是使用失效的问题错位效果如何解决？
CSS中的text-align不起作用
qq_31542611的博客
08-25 4808
css设置某个属性不生效问题
text-align:center属性失效
weixin_30399821的博客
09-03 937
text-align:center只对inline元素有效，失效的情况下 给它所有的子元素加上 display:inline-block即可 inline-block不兼容ie6 转载于:https://www.cnblogs.com/miraclesakura/p/3954007.html...
textaligncenter仍然不居中_5个word你不知道的功能
weixin_39608478的博客
12-03 729
设置书籍折页效果如果希望将制作好的文档以书籍折页效果打印出来，即在纸页中间进行装订，就要在一张纸上打印的两页内容分别是文档的第1页和最后1页。例如，文档共有28页，那么在打印时需要在第1张纸页上同时打印文档的第1页和第28页，在第2张纸页上同时打印文档的第2页和第27页，以此类推。只有这样打印出来的纸页，才能实现在纸页中间进行装订，且文档的页码仍然是按顺序排列的。要想实现书籍折页打印效果...
text-align:center设置居中不起作用
热门推荐
看看我都干了些啥！
12-20 2万+
text-align:center设置居中不起作用   参考：http://www.imooc.com/qadetail/94156   text-align只是让文字元素居中，margin：auto是让整个边框加文字居中  
text-align:center不生效，游览器报错提示：unknown property name
gaosong0623的博客
12-26 7999
今天在做作业的时候遇到个问题，用text-align:center居中盒子不生效， 游览器显示： 信息提示：unknownpropertyname 试了N种办法都搞不定，后来才发现是方向错了。 我之前一直想把整个盒子的内容直接居中，（然而盒子内容默认是静态的）， 问了大佬之后他说：把盒子内的标签属性设置居中就OK了：加上align="center"， 或者：把需要居中的内...
设置了字符间距letter-spacing后，text-align无法完全居中怎么办？
cindy647的博客
04-10 3890
在项目中，有时需要给字符设置间距，如: 点 击 查 看 为了稳定显示，我们通常不用空格，而是用letter-spacing属性给字符加上间距。如 .box { letter-spacing: 14px; text-align: center; } 实际并没有完全居中对齐，而是向右偏移了14像素，这是因为letter-spacing是加在字符右侧空间的，为了解决这一问题，...
图片的垂直水平居中；vertical-align：middle；margin:0 auto和text-align:center失效的问题
weixin_45944877的博客
08-11 1825
今天做静态页面项目练习时，在将img标签同时设置垂直和水平居中的操作过程中，出现了一系列问题，是我以前没有注意到的，总结如下： 1.img是一种可替换元素，虽然它可以设置宽高，但其本质上还是一个行内元素 （可替换元素还有<option><audio><canvas><objects><applet>）； 2.inline-block只是让行内元素可以设置宽高，让块级元素可以一行显示，但这并不代表设置为inline-block的元...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值