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;}