Center icons and text
Generally according to the standard of the following wording
<div class= "box" >
<p><i class= "Icon4" ></i><span class= "text" > No matter what, I'm in the middle of the horizontal line. </span></p>
</div>
==============
. Box P {
width:80%;
height:40px;
line-height:40px;
border:1px #000 dashed;
margin:13px Auto 0;
}
. box. Icon4 {
width:40px;
height:40px;
Display:inline-block;
Background:url (.. /images/lingdang.png) no-repeat 0 0;
background-size:100% 100%;
Vertical-align:middle;
margin-right:3px;
}
=========================
The background image is implemented using the background of the label, and the Center (vertical-align:middle;) text content is wrapped using a label. The parent element sets the row height.
Effect Address: Http://files.cnblogs.com/files/leshao/%E5%9B%BE%E6%A0%87%E5%92%8C%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD.rar
Center icons and text