css图片或图标怎么与文字设置垂直对齐

html-css017

css图片或图标怎么与文字设置垂直对齐,第1张

可以同时给 i标签和a标签 一个垂直对齐的属性

vertical-align 属性

或者将li标签设置成弹性盒模型，设置交叉轴对齐方式就行了

1、将li的height和line-height设置成为和设计稿一样的

2、将列表

图标

整体切出来，铺在ul上，不平铺

3、使用background-position控制ul背景和li中的

文字

对齐即可。。。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>易宽带卡密系统</title>

<style>

body{margin:0pxpadding:0px}

.body_center{width:900pxheight:600pxmargin:0 auto}

.body_center .logo{width:564pxheight:55pxbackground:url(images/logo.png)}

.body_center .top_right{width:200pxheight:14pxfloat:rightbackground:#C33}

.body_center .top_right em{width:16pxheight:14pxbackground:url(screen.png) no-repeatfloat:left}

.body_center .top_right a{font-size:12pxfloat:leftfont-weight:boldline-height:14px}

</style>

</head>

<body>

<div class="body_center">

<div class="logo"></div>

<div class="top_right">

<em></em>

<a href="#">提取码购买</a>

</div>

</div>

</body>

</html>