基线对齐是两端对齐吗_让盒子两端对齐小技巧 => inline-block

今天在项目中碰到了设计盒子两端对齐的栗子，咱们用inline-block方法轻松的解决了，下面是我的经验：

原理： 利用文字text-align：justify; 操纵inline-block盒子，能够实现盒子两端对齐。

说明： inline-block元素 会按照基线对齐的方式两列，给这个元素的父盒子设置一个text-align：justify； 即可实现两端对齐的功能

盒子两端对齐

* {

margin: 0;

padding: 0;

}

html,body {

width: 100%;

height: 100%;

}

.box {

width: 100%;

height: 100%;

/* 设置元素两端对齐 */

text-align: justify;

}

/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */

.box:after {

content: "";

display: inline-block;

overflow: hidden;

width: 100%;

}

.box span {

width: 50px;

height: 50px;

/* 设置盒子为行内块 */

display: inline-block;

background-color: skyblue;

/* 设置盒子内元素水平居中 */

text-align: center;

/* 设置盒子内容垂直居中 */

line-height: 50px;

}

1

2

3

4

5

盒子两端对齐

* {

margin: 0;

padding: 0;

}

html,body {

width: 100%;

height: 100%;

}

.box {

width: 100%;

height: 100%;

/* 设置元素两端对齐 */

text-align: justify;

}

/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */

.box:after {

content: "";

display: inline-block;

overflow: hidden;

width: 100%;

}

.box span {

width: 50px;

height: 50px;

/* 设置盒子为行内块 */

display: inline-block;

background-color: skyblue;

/* 设置盒子内元素水平居中 */

text-align: center;

/* 设置盒子内容垂直居中 */

line-height: 50px;

}

1

2

3

4

5