css实现文字在图片下方

时间：2016-09-21

本文讲述css中如何实现文字在图片下面的方法。

效果就如同本站的右侧的图文栏目，您其实可以直接通过我的网页源码查看css。

文字在图片下方

完整的html和css代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
img{
    display:block;
    margin:0 auto;
    }
li{
    float:left;
    width: 135px;
}
</style>
</head>
<body>
<ul>
<li> <a  href="http://www.genban.org/software/firefox_resume_closed_page.html"><img width="110" height="90" src="/uploads/2014-08/firefox_resume_closed_page-lp.png">firefox火狐浏览器恢复刚关闭网页或标签页方法以及快捷键</a></li>
<li>   <a title="雅虎被迫参与棱镜计划，上交用户数据，否则每日罚款25万美元" href="http://www.genban.org/it_news/353.html"><img width="110" height="90"  src="/uploads/allimg/140912/112P05364-0-lp.jpg">雅虎被迫参与棱镜计划，上交用户数据，否则每日罚款25万美元</a> </li>
</ul>
</body>
</html>

css已经精简到最少。通过这4个属性，我们实现了文字显示在图片下方，图片居中，并且图片浮动排列的效果。

如果仅仅是需要在图片下方的效果，只需要图片的css中添加display:block;就可以了。

上一条：html+css dl dt dd 标签实现表格用法实例 下一条:css溢出隐藏

css实现文字在图片下方

相关文章

最新文章