div+css中 图片和文字对齐

div+css中 图片和文字对齐

1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。经过多次的测试，上面三种方法都可以让图片和文字在同一行显示，下面就用实例来为大家操作一下：1、在css中给div添加上“vertical-align:middle”属性有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加CSS属性：vertical-align:middle；这样，它们在同一行就会垂直居中对齐了。html代码如下：12345<divid="cheshi">　　<imgsrc="cheshi.gif">　　<imgsrc="cheshi2.gif">　　<ahref="#">cheshi</a>　　</div>css代码如下:1234#denglu*{　　vertical-align:middle;　　font-size:14px;　　}使用css的“vertical-align:middle”属性让图片和文字在同一行对齐是一种非常常用的方法，也是比较利于代码优化和精简的一种方法，希望大家可以掌握。2、把图片设置为背景图片如果我们的图片本身是一个背景图片的话，可以在css中使用“background”来设置该图片，然后设置文字的padding属性就可以使他们在同一行显示了。html代码如下：123<divid="cheshi">　　<divid="cheshi1"><ahref="#">测试</a></div>　　</div>css代码如下：1234567#cheshi{　　background:url(cheshi.gif)no-repeatleftcenter;　　}　　#cheshi1{　　font-size:14px;　　padding-left:50px;　　}我们在css中设置了背景图片，然后又设置了文字的padding-left属性，这样，图片和文字就在同一行显示了，运行结果就不切图了，你可以自己试一下。3、把文字和图片分别放入不同的div中下面说下最后一种方法，分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行了。html代码如下：<div id="che">　　<div id="shi"> <img src="cheshi.gif"/>　　<div id="cheshi"><a href="#">测试</a></div>　　</div>css代码如下：#cheshi{　　font-size:14px;　　margin-top:-16px;　　padding-left:50px;　　}在浏览器中运行以后，你会发现，这个方法也可以让图片和文字在同一行显示，但是看起来好像麻烦了一点，所以个人还是比较推荐第一种方法的。