                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS深入理解之vertical-align

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

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

.box {

height: 300px;background: red;

}

.con {

display: inline-block;

vertical-align: middle;

}

p {

margin-left: 800px;

}

i {

display: inline-block;

height: 100%;

vertical-align: middle;

}

</style>

</head>

<body>

<div >

<div>

</div><i></i>

</div>

</body>

</html>

慕婉清2352981

2017-10-24

源自：CSS深入理解之vertical-align 9-1

关注问题我要回答

1211

操作

收起

1 回答

留白未来回答被采纳 +2 积分
2017-11-02

没必要加太多东西. 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;
			}