井井客

搜索

CSS控制同一行的文字与图片居中对齐

如何让一行的文字与图片居中对齐,总结来说有下面三种情况,基本已经测试过了。因为同一种布局可以用好几种方法来实现,下面也代码也仅供大家参考而已。

CSS控制同一行的文字与图片居中对齐

第一种情况,当文字在图片左边:

CSS代码:

.div01 { width:100%; height:50px; line-height:50px; border:1px dotted #e8e8e8; overflow:hidden;}
.div01 img { float:left; margin:14px 8px 0;}

Html代码

<div class="div01">
<img src="http://www.jingjingke.com/res/img/ceshi.png" width="20" height="20" />如果图片在文字左边
</div>

第二种情况,当文字在图片右边:

.div02 { width:100%; height:50px; line-height:50px; border:1px dotted #e8e8e8;}
.div02 img { position:relative; top:4px; margin:0 8px;}

Html代码

<div class="div02">
如果图片在文字右边<img src="http://www.jingjingke.com/res/img/ceshi.png" width="20" height="20" />
</div>

综合整理:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS控制同一行的文字与图片居中对齐</title>
<style>
/* 图片在文字左边 */
.div01 { width:100%; height:50px; line-height:50px; border:1px dotted #e8e8e8; overflow:hidden;}
.div01 img { float:left; margin:14px 8px 0;}
/* 图片在文字右边但并不抵边 IE7+支持 */
.div02 { width:100%; height:50px; line-height:50px; border:1px dotted #e8e8e8;}
.div02 img { position:relative; top:4px; margin:0 8px;}
</style>
</head>
<body>
<div class="div01">
<img src="http://www.jingjingke.com/res/img/ceshi.png" width="20" height="20" />如果图片在文字左边
</div>
<div class="div02">
如果图片在文字右边<img src="http://www.jingjingke.com/res/img/ceshi.png" width="20" height="20" />
</div>
<div class="div02">
如果图片在文字中间<img src="http://www.jingjingke.com/res/img/ceshi.png" width="20" height="20" />如果图片在文字中间
</div>
</body>
</html> 

妈妈再也不用担心我不能用CSS控制同一行的文字与图片居中对齐了~~

文章TAG:css

作者:井井客整理来源:原创
本文标题:CSS控制同一行的文字与图片居中对齐
本文链接:/c/268.html

上一篇:利用float制作兼容ie6的纯css下拉菜单
下一篇:CSS块级与内联元素

文章分类

相关阅读

随便看看