html 字体在按钮中心,实现图标Icon+文字在div里自动中心居中（水平垂直居中）...

已知div行高设置text-align:center文字会自动居中。

通过:before来设置icon的地址和高宽。

需要设置图片默认的垂直居中条件，与文字一致，为text-bottom。

设置图片行级显示。

body{margin:0;padding:0;}

.con{position:absolute;width:500px;height:50px;border:1px red solid;

line-height:50px;color:green;text-align:center;

}

.txt{font-size:20px;}

.txt:before{

content:'111';

background-image:url('icon.png');

background-size:20px 20px;

vertical-align:text-bottom;

display:inline-block;

width:20px;

height:20px;

border:0;

top:0;

left:0;

}

我是三哥四哥五哥一个字

实际效果，图标和文字会自动在div里中心居中

实现div里的img图片水平垂直居中

body结构

...

图片与文字在div里实现垂直水平都居中

第一种方法,利用盒布局实现  

margin-bottom无效问题以及div里内容动态居中样式!

最近调前端样式时候,遇到一个需求,在中间文字不对等的情况下想让下面的操作文字距离底部对齐,如图: , 刚开始觉得使用margin-bottom就可以,后来发现只有margin-top是管用的,查了资料 ...

一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度

方法一:浮动  注意三个div的位置