                        課程
                    
                        /前端開發(fā)
                        
                            /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

關(guān)注問題我要回答

1311

操作

收起

1 回答

留白未來回答被采納 +2 積分
2017-11-02

沒必要加太多東西. con類你已經(jīng)設(shè)成了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;
			}