css之讓文字排在圖片的右邊的中心位置
阿新 • • 發佈:2018-12-20
效果截圖如下:
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;}