居中那些事：居中为什么有时候没效果 margin：0 auto text-align:center valign vertical-align:middle

最新推荐文章于 2024-08-21 16:13:13 发布
最新推荐文章于 2024-08-21 16:13:13 发布
阅读量738 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vertical-align 垂直居中 不起作用 line-height center
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/luckyGirlIT/article/details/94604554
本文详细介绍了CSS中实现水平和垂直居中的多种方法，包括使用table、line-height、margin及vertical-align属性。并解析了各属性在不同场景下的适用性和限制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.table表格中的居中（不仅仅是表格 任何情况下都可以设置行内水平居中样式，但是垂直居中不可以）

水平居中
垂直居中 2.margin:0 auto margin:0 auto不起作用的原因：界面需要有宽度 ，如果只有图片Img等行内元素，没有宽度 则需要给body一个宽度,才能有作用 3.vertical-align:middle 垂直居中 为什么不起作用 图片垂直居中用vertical-align:middle; 只对（xhtml）元素生效。例如
不适用于
没有垂直居中特性，使用vertical-align对这些元素不起作用。 文字水平居中用text-align:center; 文字垂直居中用text-height:10px; line-height:父级高度 垂直居中 可以设置Line-height:等于父级高度 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190704132236420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1Y2t5R2lybElU,size_16,color_FFFFFF,t_70)

4.line-height设置垂直居中

luckyGirlIT
关注
div+css（二） 和页面布局有关的css属性（最基础也是最重要的属性）
weixin_43439782的博客
02-21 347
1. 属性—position top right bottom left 值：absolute， relative ，static，fixed 注意：要使position属性生效，需要配合属性top:200px或者left:200px 配合使用 relative：是相对于自己原来0 0 的位置，再偏移 fixed：固定在某一个位置，不随文本移动而移动 position 属性布局不是主流的页面...
鸿蒙os学习3：文本组件
weixin_61907621的博客
08-13 886
鸿蒙学习
设置了*{margin:0;padding:0}后table的align:center失效
King的博客
07-08 1541
今天在做一个表格时，开头在内部样式表中写了： *{ margin:0; padding:0; } 问题一 当我在body里面做表格时，发现table的 align:center;属性失效，不能居中了。 查阅相关资料后，发现是 margin:0 导致的。 解决办法：在table中设置 margin:auto; 即可。 问题二 当我在table中设置 cellpadding 属性时也失效了。 ...
text-align: center，margin: 0 auto
YingDaoMonkey的博客
06-28 278
要实现这种水平居中，在设置父元素具有text-align:center属性的基础上，必须设置子元素（要居中                  的元素）的display:inline-block或者display:inline，即只能实现行内块的水平居中。 注：简单的实现垂直居中，我们可以发现并不需要对子元素进行特殊设置，我们只需要设置父元素的                display:tabl...
html 遇到margin居中的问题
weixin_34247032的博客
07-26 171
           今天在写div时发现不居中，            div{                      margin:0 auto;             }            那么给div一个固定的宽度，就会居中了                  div{                      margin:0 auto;             ...
居中 margin：0 auto与text-align:center的区别
zzh754887272的博客
06-11 622
margin：0 auto； 这个是定义的块级元素本身居中的 举个例子： 《div》这是一段文字《div》 上面的代码是让块级元素DIV自身居中的，而text-align:center;是让div里面的那段文字（“这是一段文字”）内联级别的基于div这层内居中
margin不能实现水平居中的几种情况和解决办法
.DEMO
02-21 2149
margin:0 auto 不能实现水平居中的原因解析 1. 对行内块和行内元素设置auto margin:0 auto只对block块元素起作用，当给想要居中的inline-block行内快元素或者inline行内元素设置margin:0 auto实现水平居中是不管用的，可以转换成块元素之后再使用。 2. 给外层元素设置了float 有时不注意给要设置居中的外层元素设置了float(float:left或者float:right),因为设置了float后会让内层元素靠左或者靠右浮动，但是有设置auto想要
vertical-align:middle设置垂直居中
ZhiJICN的博客
08-07 269
可以实现在标签里面水平垂直居中 display:inline-block vertical-align:middle，text-align：center
input输入框在移动端出现光标无法垂直居中的问题解决办法
web_callBack的博客
12-27 2801
出现问题的原因：就是在input设置样式的时候不要使用line-height来实现垂直居中。 解决的办法：要想实现文字的垂直居中，应该设置高度，然后再使用padding来进行填充。
html+css实战64-综合案例3-图片完成
geyaoisnice的博客
06-06 546
html
CSS文本样式（二）
最新发布
qq_72013756的博客
08-21 4659
从零开始学前端
表格不能垂直居中问题解决一例（超简单）
Senton
09-12 1308
近日，公司美工在画一个HTML时，发现表格不能垂直居中，很是困惑，示意源代码为： <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文
简单理解css中的垂直居中和水平居中，即vertical-align和text-align属性
热门推荐
liwusen的博客
04-03 3万+
如何实现父元素内部元素的垂直居中与水平居中，vertical-align和text-align的简单实用方法
margin:0 auto 与 text-align:center 的区别
weixin_34174422的博客
01-22 230
基本概念： 1.text-align: 属性规定元素中的文本的水平对齐方式;  　　　　　　 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 　　　　　　 一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 　　Example: div { text-align: left; }  //文本居左对齐 　　注释：所有浏览器都支持 text-align...
react拖拉流程图_基于ReactJS实现的数据可视化状态图
weixin_39716105的博客
02-11 509
JavaScript语言：JaveScriptBabelCoffeeScript确定const pedestrianStates = {initial: 'walk',states: {walk: {on: {PED_TIMER: 'wait'}},wait: {on: {PED_TIMER: 'stop'}},stop: {}}};const lightMachine = {id: 'light...
margin-top有时候不起作用
iteye_19587的博客
08-12 228
有时在用ul,li时。使用属性margin-top不起作用！
html a纵向 位置,关于html：如何在span标签内垂直对齐内容？
weixin_36199334的博客
05-31 566
如何使" x"在跨度的中间垂直对齐？.foo {height: 50px;border: solid black 1px;display: inline-block;vertical-align: middle;}x使用line-height:50px;代替高度。这应该够了吧 ;)外观极好！它适用于任何类型的标签。就我而言，工作于。问题是文本换行时。如果使用两行，则该跨度将以100px的高度呈现。...
el-table设置某一列表头文字居中，th:nth-last-child(1)不生效
youyudexiaowangzi的专栏
07-16 1265
今天接到一个页面需求，要求表格的最后一列是操作按钮，但是标题要居中，操作列之前的列不用居中 本来想着直接覆盖 样式即可 .el-table th:nth-last-child(1){ text-align: center; } 发现并没有作用，于是在浏览器的开发者工具中直接改样式，发现是可以的，但是加上nth-last-child(1)就是不起作用，而且这个样式还直接就灰了，但是nth-child(1) nth-child(4)都是可以对指定的列生效的 观察html元素发现，原来我以为的最后一列
CSS实现div垂直居中：单行与多行解决方案
最后，CSS Grid布局同样可以方便地实现垂直居中，通过`align-items:center`或`grid-template-rows:auto 1fr auto`结合`justify-content:center`： ```css .parent { display: grid; align-items: center; grid-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值