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