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;就可以了。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

背景图片不重复不平铺,可以这样设定背景: 1、body style=background-image: url(图片文件地址); background-attachment: fixed; 这样背景图片就会固定住,不会因页面滚动而重复。 2、使图在任何大小的屏幕都不会显示重复,可以这样设定背景(图像不平铺)
css鼠标指向或滑过,我们可以使用css hover伪类,图片变色可以使用background,变亮变暗可以使用css opacity属性。本文章向码农介绍css鼠标滑过/指向图片变色变暗变亮实例。
本文章向码农们介绍深入理解HTML5实现图片压缩上传功能,这里只要使用到html5 canvas,需要的码农可以参考一下。
看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被CSS设置为半透明样式。
css中,我们可以使用background来设置HTML元素的背景图片和背景颜色,设置背景颜色是非常简单的一件事情,但设置背景图片则需要一些技巧,本文章向大家介绍background的使用方法和技巧,需要的码农可以参考一下。
在很多时候需要将图片上下垂直居中,不过没有一个直接了当的属性能够实现此功能。当然实现图片上下垂直居中的方法有多重,下面就简单介绍一下其中的两种。需要的朋友可以参考一下。