为了账号安全,请及时绑定邮箱和手机立即绑定

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.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>

<p>1hang</p>

<p>1hang</p>

<p>1hang</p>

<p>1hang</p>

<p>1hang</p>

</div><i></i>

</div>

</body>

</html>


正在回答

1 回答

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


0 回复 有任何疑惑可以回复我~
#1

慕婉清2352981 提问者

非常感谢!
2018-01-03 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信