css居中對齊大全

weixin_34124651發表於2018-06-10
CSS

一、垂直居中對齊

圖片跟行內塊中部對齊：圖片和行內塊都設定vertical-align:middle;
12275941-ecb1f4d47a40138f.png
圖片.png
文字跟行內塊中部對齊：行內塊設定vertical-align:middle;
12275941-e3a73e9231d2224f.png
圖片.png

文字跟圖片中部對齊：圖片設定vertical-align:middle;
12275941-70a7f3cab187f903.png
圖片.png

二、垂直居中
盒子中塊元素垂直居中：position: relative;top:50%;margin-top:—盒子高度的一半;
12275941-202c166eeb3fe9d4.png
圖片.png
盒子中行內塊（無字）垂直居中：line-height:盒高;並且行內塊vertical-align: middle;
12275941-37b48eac4d7d5421.png
圖片.png
盒子中行內塊（有字）垂直居中：父盒子及行內塊設定line-height:盒高;並且行內塊vertical-align: middle;
12275941-980744bd86fdc261.png
圖片.png

盒子中圖片垂直居中：line-height:盒高;並且圖片vertical-align: middle;
12275941-8c1b0ea674b87bba.png
圖片.png
盒子中行內元素垂直居中：line-height: 盒子高
盒子中文垂直字居中：line-height: 盒子高
三、水平居中
盒子中塊元素居中：margin:0px auto;
盒子中行內塊、圖片、行內元素、文字等居中：text-align:center;

相關文章