css1图标和text上下对齐,CSS图标文字对齐和表单输入框文字对齐兼容例子

1.图标和文字对齐

一般的图标和文字对齐html代码：

前端开发博客

javascript:" class="icon">删除前端开发博客

zxx的CSS代码：

p{line-height:20px; font-size:14px;}

.icon {

display: inline-block;

width:20px; height:20px;

background: ...;

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';

}

这个代码主要是通过line-height来控制图标的文字和临近的文字同样行高，实现在同一行中。

2.表单输入框和内容对齐

简单的一个文字和文本输入

手机号*

CSS代码：

body{font:14px/1.42858 'microsoft yahei', arial, sans-serif; -webkit-font-smoothing: antialiased; } /*行高为20像素*/

.cell {

display: table-cell;

*display: inline-block;

width: 2000px;

*width: auto;

}

input.ui_input,

.ui_input > input {

height: 20px;

line-height: 20px;

padding: 9px 8px;

border: 1px solid #d0d0d5;

border-radius: 4px;

background-color: #fff;

font-size: 14px;

outline: none;

color: #545a6c;

-webkit-transition: border-color .15s, background-color .15s;

transition: border-color .15s, background-color .15s;