html里图标和文字对齐,前端 - css如何实现图标和文字的“绝对对齐”呢？

PHPzhong2017-04-17 14:20:50

移动端(安卓设备、ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局，可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题，一般不推荐使用弹性盒子，依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐。

关闭

//css

* {

padding: 0;

margin: 0;

}

.close-btn {

display: -webkit-box;

display: box;

display: -webkit-flex;

display: flex;

-webkit-box-align: center;

box-align: center;

-webkit-align-items: center;

align-items: center;

background-color: #00BB9C;

width: 80px;

height: 40px;

margin: 30px auto;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

.icon-close-hmc {

display: block;

background-position: center;

background-repeat: no-repeat;

background-size: contain;

background-image: url("http://s1.mi.com/m/images/20151028/top-x.png");

width: 16px;

height: 16px;

margin: 0 10px;

}

.close-txt {

font-size: 16px;

color: #FFFFFF;

}

回复0