css之让文字排在图片的右边的中心位置...

效果截图如下:

html代码如下:

<dl>
            <dt>领导、老师</dt>

            <dd><img src="images/tx1.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzzzz</a></dd>
            <dd><img src="images/tx2.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
            <dd><img src="images/tx3.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
            <dd><img src="images/tx4.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
            <dd><img src="images/tx5.jpg" width="100" height="100" /><a href="#">zzzzzzzzzzz</a></dd>
</dl>

css代码如下:

dl dd{
    margin-top:10px;
    height:100px;
    border:1px solid  #F00; /*颜色*/
}
dl dd img{
    float:left;
    border:1px solid  #F00; /*颜色*/
}
dl dd a{
    line-height:100px;     /*注意这行代码，惹是不写，得不到想要的结果哦*/
    vertical-align:middle;
    border:1px solid  #F00; /*颜色*/
    text-align:left;
}