CSS深入理解之vertical-align_技术问答

kevine099

vertical-align不起作用是咋回事: 已采纳慕先生7111165 的回答; 可能是配置有问题; 2022-02-11 1回答·394浏览

慕先生7111165

vertical是做什么的: 已采纳 kevine099 的回答; vertical-align 属性设置元素的垂直对齐方式。; 2022-02-11 1回答·367浏览

爱前端的小鑫

为什么bottom设置vertical-align不起作用呢

已采纳 Raychan 的回答

如下图所示：

2020-04-13 2回答·1591浏览

慕粉3597289

vertical-align对齐问题: 2020-03-26 0回答·597浏览

Feda

如何确定父元素的baseline在哪儿: 2019-06-23 2回答·1316浏览

慕盖茨5287063

不定文字和图片垂直居中不起作用，求教师和同学指出错误

效果如下，我都是按照老师教的写的，不知道那里出了问题

2019-06-17 2回答·934浏览

qq_慕婉清8052670

vertical-align: 因为demo中三个元素(span1,span2和x)的默认对齐方式都是(baseline)，且span1的font-size最大(span1:50px,span2:20px,x:24px(左右)),所以span1靠最底，以span1的文字底为baseline对齐，反过来，你把span1和span2的font-size数值对换下，那么结果span2就会与底对齐了; 2019-04-28 1回答·970浏览

慕少1273193

为什么图片会影响文字?这和定义不符合

（1）当图片的设置为 top ,文字设置 bottom ：

首先不是说文字会与图片的底部对齐，而是因为图片太高，高于父容器的内容高度，导致图片对齐父容器的内容文字顶部后撑开了父容器，使父容器高度变高，然后这时父容器的底部巧合和图片底部在同一水平线，然后你就错以为说它后面的文字是和图片底部对齐了，实质上是后面文字与父容器的底部对齐。你自己测试将图片大小变小，小于父容器内容高度，你就明白了，如下：

（2）当图片的设置为bottom,文字设置bottom：

会下沉？没感觉噢，我个人认为是不会有下沉的，都会在同一条水平线上。

假设父容器中不含有其他元素，只有自己的文字内容，那它高度正是他的内容高度，如下图：

这时候给他内容加一个图片，设置vertical-align：bottom，图片底部会和上面的内容底部在同一水平线，如下图：

这时再在图片后加一段文字（【span】display：inline-block；vertical-align：bottom），它一样是会和父容器初始内容底部在同一水平线，不会受到图片的影响。如下图：

所以我感觉是你看错了。

好好琢磨透“只与父级有关系”这个还是很不错的。

以上为个人学习后的理解，如有错误，Emmm，哈哈哈哈哈，快来教懂我吧。

2018-11-30 1回答·1417浏览

慕数据6088604

还是不明白，为什么top后文字的高度会上移，又不是脱离文档流。: 不好意思我搞明白了是我的问题; 2018-06-14 1回答·1330浏览

寒微流雪

你都知道什么？: 持续懵逼中...............; 2018-04-26 1回答·1248浏览

不知道怎么合适

什么是图片下去，整体上去: 图片拥有了vertical-align：top属性其意义是图片顶部与父元素顶部对齐，而其他元素并没有特殊的对齐属性，就会依照默认的左上对齐，所以就会显示出来图片下移，整体上移; 2018-03-19 2回答·1294浏览

12990240jin

多行上下居中的问题: 已经解决了; 2018-01-02 1回答·1359浏览

上衫原

div设置垂直居中无效化

已经解决

把div设置成内联块，去掉高度，而改成行高（行高高度为之前设置的高度大小），内部span中取消行高，这样实现居中

2017-12-01 1回答·1954浏览

慕的地5229325

为何一样的代码却只实现了垂直方向上的效果，水平方向上没有相对应的效果？: 2017-11-23 2回答·1354浏览

qq_佛解花_0

为什么添加字符就可以让宽度消失: 我觉得是因为元素添加一个字符并且line-height=0使得基线上移，从而使得元素也上移，而不用跟外面x的下边缘对齐; 2017-11-14 1回答·1459浏览

慕婉清2352981

多行垂直居中做到了但如何同时做到水平居中呀

已采纳留白未来的回答

没必要加太多东西. con类你已经设成了inline-block,那么在父盒子上就可以直接text-align: center;另外你这垂直居中的效果不太对.box类上不是height,而是line-height.将你的代码简单修改了一下,你看看效果是不是你想要的.

html部分

	<body>
		<div class="box">
			<div class="con">
				<p>1hang</p>
				<p>1hang</p>
				<p>1hang</p>
				<p>1hang</p>
				<p>1hang</p>
			</div>
		</div>
	</body>

css部分

			.box {
				line-height: 300px;
				background: red;
				text-align: center;
			}
			
			.con {
				line-height: normal;
				display: inline-block;
				vertical-align: middle;
				border: 1px dashed blueviolet;
			}

2017-10-24 1回答·1267浏览

慕前端7454177

vertical-align:10px和视频中讲的不一致: 能举个例子吗？这问的太简洁了，可能有些小设置出现了问题，你发代码上来才能发现问题。; 2017-10-06 1回答·1396浏览

qq_閆埜_03724478

vertival-align:middle;兼容ie7的的时候需要加空格，css压缩的时候怎么办: &nbsp 或者空标签可以吗？; 2017-10-06 1回答·1503浏览

慕神6115920

2:15位置改变图片vertical-align后，图片的baseline在哪儿？文字为什么也跟着上移？谢谢

是图片拥有了顶部对齐父元素顶部的属性，那么自然就会顶对齐，而文字及其他元素并没有特殊属性，所以会默认在顶部对齐，就形成了所有元素往上推
就是一条的原因
右侧是文字，它自身的基线也是相对于自身而言是没有变化，所以并不是右侧基线上去了，而是右侧元素整个上移，另外图片的基线和文字基线并没有关联，它们的baseline属性值都是相对于父级的基线的，所以两者的位置不会相互影响。

2017-09-28 2回答·1676浏览

亲爱的小豆包啊

表情图片对齐？: 就是老师用的例子，我没弄明白; 2017-09-14 2回答·1289浏览

孰庸

行高为0，为什么按钮下降了而文字却没下降？: 因为button默认是text-align:center;; 2017-08-12 1回答·1327浏览

宅到深处自然萌

我是酱油是个什么鬼？: 2017-07-29 2回答·1159浏览

慕瓜3428435

哪里可以系统的学习css: 已采纳西兰花伟大炮的回答; 百度搜索菜鸟教程，里面有很多; 2017-05-24 1回答·1787浏览

侠客岛的含笑

为什么老师说五根指头不够用，数值和百分比分开正好五根指头啊?: 已采纳 _夕晨踏雪的回答; 这个不必当真吧，，，只是说他们比较类似所以放到了一起，正好是四点，若是分开，就五点了。。。。; 2017-04-08 2回答·1322浏览

红果果的青蛙

添加辅助元素居中的原理？

晚上好不容易弄明白了，兴冲冲的来这自答一下，结果慕课网这个回答问题的输入框差点没把我气死，真是烂透了，提交了几次都报数据库错误；幸好备份过，但是粘贴进来格式全不对了，一一改完提交后居然还是一样的错误，反复几次浪费了半小时，还能让我好好过个年不？

最后没办法了，把答案记录在了慕课网《CSS深入理解之vertical-align》释疑记录这里，还是简书靠谱啊。

—— 于2017年除夕夜 2017.1.28

2017-01-27 1回答·1515浏览

慕粉4366429

行高为0，为什么不是下降到容器二分之一处（或者文字二分之一处），而是到文字上边: 已采纳慕勒5197866 的回答; 默认是基线对齐; 2017-01-18 1回答·1563浏览

传说中的小白龙

辅助元素居中一点疑问。: 没太明白楼主的意思。不管怎么说在chrome55尝试了楼主的代码，span设置vertical-align: middle在楼主说的同情况下都能引起span位置的变化呀; 2017-01-18 3回答·1150浏览

一直都在路上

最后实例图片如何水平居中的？: text-align：center; 2017-01-04 1回答·1187浏览

Lastlove

下边还是有边距已经设置了line-height：0；和vertical-align：top: 你把你的代码都复制出来，放到编辑器里面，然后在到浏览器里面预览。你会发现你那个图片的底部就像有那么一点点阴影的效果。个人觉得那个白色的不是空白，应该是图片的问题。你换张图片看看，就没有你说的留白的。你可以用下面的图片试一下。; 2017-01-03 1回答·1348浏览

zjmzjmzjm

为什么设置了图片的verical-align,动的缺失隐匿文本: 2016-12-04 1回答·950浏览