div网站建设的时候如何让图片和文字都水平居中？

2013-05-13 分类：网站建设

初学者在用div做网站的时候

常常会碰到这样一个问题

在同一行里面

同时插入图片和文字的时候

默认是底对齐

这实在是太不爽了

一看上去就觉得不和谐嘛

当然，大家可以有很多种方法实现

例如把图片放在一个div里

后面的文字再放一个div里

这样互不干扰，就可以随意定位置了

八过，我们曾经说过，要尽量用简单的代码把网站写出来

你这样做效果确实可以出来，不觉得div有点太多了吗

其实解决这个问题的方法很简单

你可以把图片和文字写在一个div里

然后，只要对图片加一个属性：vertical-align：middle就可以实现了！

下边是给大家总结的源代码，希望可以给大家有帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

.main{ width:100%; height:48px;}

.jvzhong{ width:1000px; height:48px; margin:0 auto;}

.main ul li{ float:left; width:33.2%;text-align:center;}

.teshu{ border-right:1px #aaa solid; border-left:1px #aaa solid;}

.mid{ vertical-align:middle; margin-right:20px;}

ul,li{ margin:0; padding:0;}

li{ list-style:none;}

</style>

</head>

<body>

<div class="main"

<ul>
<li>
<img class="mid" src="image/icon-mi.png" />
成都创新互联
</li>
<li class="teshu">
<img class="mid" src="image/icon-mi.png" />
成都创新互联
</li>
<li>
<img class="mid" src="image/icon-mi.png" />
成都创新互联
</li>
</ul>
</div>
</div>

</body>
</html>

网站名称：div网站建设的时候如何让图片和文字都水平居中？
浏览地址：https://www.cdcxhl.com/news23/723.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站建设等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容