IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > css >

css实现文字在图片下方

2014-12-08 11:33 来源: IT技术学习网原创 阅读:

本文讲述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.itjsxx.com/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.itjsxx.com/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;就可以了。

css实现文字在图片下方
转载需注明出处:IT技术学习网 http://www.itjsxx.com/css/755.html

评论文章 css实现文字在图片下方
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图