成都创新互联
成都创新互联
成都创新互联
2013-05-13 分类: 网站建设
初学者在用div做网站的时候
常常会碰到这样一个问题
在同一行里面
同时插入图片和文字的时候
默认是底对齐
这实在是太不爽了
一看上去就觉得不和谐嘛
当然,大家可以有很多种方法实现
例如把图片放在一个div里
后面的文字再放一个div里
这样互不干扰,就可以随意定位置了
八过,我们曾经说过,要尽量用简单的代码把网站写出来
你这样做效果确实可以出来,不觉得div有点太多了吗
其实解决这个问题的方法很简单
你可以把图片和文字写在一个div里
然后,只要对图片加一个属性:vertical-align:middle就可以实现了!
下边是给大家总结的源代码,希望可以给大家有帮助
.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;}