css实现文字在图片下方
本文讲述css中如何实现文字在图片下面的方法。效果就如同本站的右侧的图文栏目,您其实可以直接通过我的网页源码查看css。文字在图片下方完整的html和css代码如下:
本文讲述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;就可以了。
特别声明:以上内容(如有图片或视频亦包括在内)为本平台用户上传并发布,本平台仅提供信息存储服务。举报




