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

12990240jin

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

慕的地5229325

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

慕婉清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回答·1268浏览

红果果的青蛙

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

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

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

—— 于2017年除夕夜 2017.1.28

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

传说中的小白龙

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

一直都在路上

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

kaka19881101_0001

加辅助元素是绝对垂直居中吗: 父元素要设置height而不是line-height; 2016-01-12 2回答·1055浏览

木木i

三行 5行那个怎么搞，求大神帮我解释下: 能具体解释一下么，不知道怎么弄？; 2015-11-19 4回答·952浏览

adad

最后是怎么多行垂直居中的啊

<p class="box"><span>多行垂直居中<br>多行垂直居中<br>多行垂直居中<br>多行垂直居中</span><i></i></p>

.box {height:200px;background: #aaa;}
.box span {display: inline-block;vertical-align: middle;}
.box i {display: inline-block;height:100%;vertical-align: middle;}

2015-11-16 2回答·972浏览