flex布局

阅读更多

要实现如下简单效果

 

使用传统布局：

.sa-followeditor-nofollow
{
	height: 220px;
}

.sa-followeditor-nofollow-icon
{
	position: absolute;
	left: 95px;
	right: 95px;
	top: 70px;
	height: 102px;
	background-repeat:no-repeat;
	background-position:center;
}
.sa-followeditor-nofollow-text
{
	position: absolute;
	left: 92px;
	right: 92px;
	top: 185px;
	height: 34px;
	font-size: 12px;
	line-height: 17px;
	text-align: center;
	color: #999999;
	letter-spacing: -0.29px;
}
使用flex布局：

.sa-followeditor-nofollow
{
	width: 100%;
	height: 220px;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.sa-followeditor-nofollow-icon
{
	width: 170px;
	height: 102px;
	background-repeat:no-repeat;
	background-position:center;
}

.sa-followeditor-nofollow-text
{
	width: 176px;
	height: 34px;
        margin-top:13px;
	font-size: 12px;
	line-height: 17px;
	text-align: center;
	color: #999999;
	letter-spacing: -0.29px;
}

 可见传统布局麻烦，left，right得量，不一定准确，当然也可以left: 50% ，margin-left: xxx，而且万一图片响应式，得改CSS，flex布局简单准确。。。。。

• 
• 大小: 13.5 KB

• 查看图片附件