原创声明：本文所有图片和代码皆由本人制作和编写。
目标
当前html毛坯房
<div class="bar">
<ul>
<li>
<img src="./img/check.png">
<span>审查</span>
</li>
<li>
<img src="./img/set.png">
<span>设置</span>
</li>
<li>
<img src="./img/download.png">
<span>下载</span>
</li>
</ul>
</div>
方法一 纯CSS2
第0步 排版之前的一些css基本设置
/*清除一些默认样式*/
*{
padding: 0;
list-style: none;
}
/*给容器设置宽高和颜色作为背景板*/
.bar>ul{
height: 100px;
width: 1200px;
background-color: rgb(224, 228, 242);
}
/*列表子元素启用浮动*/
.bar>ul>li{
float: left;
}
/*设置图标大小*/
.bar>ul>li>img{
height: 50px;
}
这一步结束时的效果：
第1步 图标与文字对齐
/*在父容器中设置字体大小为零 否则文字将挤占后期的排版*/
.bar>ul>li{
float: left;
font-size: 0px;
}
/*给文字子元素单独设置文字大小与垂直居中*/
.bar>ul>li>span{
font-size: medium;
vertical-align: middle;
}
/*给图片子元素设置垂直居中*/
.bar>ul>li>img{
height: 50px;
vertical-align: middle;
}
这一步结束时的效果：
第2步 把li居于ul的垂直中部且均匀分布
.bar>ul{
height: 100px;
width: 1200px;
background-color: rgb(224, 228, 242);
/*垂直居中*/
line-height: 100px;
}
.bar>ul>li{
float: left;
font-size: 0px;
vertical-align: middle;
/*均匀分布*/
width: 33%;
}
这一步结束时的效果：
第3步 li的子内容水平居中于li
原理：
.bar>ul>li{
float: left;
font-size: 0px;
vertical-align: middle;
width: 33%;
text-align: center;
}
这一步结束时的效果：
方法二 使用CSS3的flex
第0步 排版之前的一些css基本设置
这次让最外层的div作为容器，这次会遇到浮动塌陷问题，所以需要使用伪类选择器。
/*清除一些默认样式*/
*{
padding: 0;
list-style: none;
}
/*给容器设置宽高和颜色作为背景板*/
.bar{
height: 100px;
width: 1200px;
background-color: rgb(224, 228, 242);
}
/*解决浮动塌陷问题*/
ul::after{
content: "";
display: block;
clear:both;
}
/*列表子元素启用浮动*/
.bar>ul>li{
float: left;
}
/*设置图标大小*/
.bar>ul>li>img{
height: 50px;
}
第1步 图标与文字对齐
.bar>ul>li{
float: left;
display: flex;
align-items: center;
}
这一步结束时的效果：
第2步 把li垂直居中且均匀分布
.bar{
height: 100px;
width: 1200px;
background-color: rgb(224, 228, 242);
/*垂直居中*/
line-height: 100px;
}
/*均匀分布*/
.bar>ul{
display: flex;
}
.bar>ul>li{
flex:1;
float: left;
display: flex;
align-items: center;
}
这一步结束时的效果：
