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

最新推荐文章于 2023-07-17 17:40:55 发布

文艺er

最新推荐文章于 2023-07-17 17:40:55 发布

阅读量5.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签：前端 ViewUI

本文链接：https://blog.youkuaiyun.com/wenyier/article/details/84662750

html/css 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的图片与链接布局方案。通过定义特定的CSS样式，实现了图片与链接的合理排列，并确保了良好的视觉效果。文章通过具体代码展示了如何设置图片的浮动、边框及链接的高度等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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