Css notes-small icon text alignment intermediate solution, css alignment

Css notes-small icon text alignment intermediate solution, css alignment

Source: http://www.zhangxinxu.com/study/201603/icon-text-vertical-align.html

Css

.icon {     display: inline-block;     width:20px; height:20px;     background: url(delete.png) no-repeat center;     white-space:nowrap;     letter-spacing: -1em;     text-indent: -99em;     color: transparent;    /* IE7 */    *text-indent: 0;    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');}.icon:before {     content: '\3000'; }

Html

<Strong> scenario 1, empty tag </strong> <p> <I class = "icon"> </I> Delete </p> <strong> scenario 2, internal text </strong> <p> <a href = "javascript: "class =" icon "> Delete </a> text </p> <p style =" color: gray; "> -------- The following is an example ------ </p> <strong> overflow: hidden </strong> <p> <I class =" icon "style =" overflow: hidden; "> </I> Delete </p>

 

1 small font size

　　

 

2 font sizes