用css实现图片和文字左右居中给,文字在图片下方如下图所示:
html代码:
<html>
<head>
</head>
<body>
<div class="rows">
<div class="row">
<div class="item">
<a class="item-a"><img src="img/u42.jpg" /></a>
</div>
<a class="span" title="我是谁"><div class="span-div">我是谁</div></a>
</div>
<div class="row">
<div class="item">
<a class="item-a"><img src="img/u42.jpg" /></a>
</div>
<a class="span" title="我是谁"><div class="span-div">我是谁</div></a>
</div>
<div class="row">
<div class="item">
<a class="item-a"><img src="img/u42.jpg" /></a>
</div>
<a class="span" title="我是谁"><div class="span-div">我是谁</div></a>
</div>
<div class="row">
<div class="item">
<a class="item-a"><img src="img/u42.jpg" /></a>
</div>
<a class="span" title="我是谁"><div class="span-div">我是谁</div></a>
</div>
</div>
</body>
</html>
css代码:
.rows{
margin:0 auto;
width:420px;
height:110px;
}
.row{
float: left;
overflow: hidden;
width: 92px;
margin:5px;
}
.item{
text-align: center;
border: 1px solid #ddd;
height: 90px;
overflow: hidden;
}
.item-a img{
width:90px;
height:90px;
}
.span-div{
margin: 0 auto;
padding: 0;
overflow: hidden;
text-align: center;
text-decoration: none;
font-weight: normal;
width: 92px;
height: 20px;
line-height: 20px;
position: relative;
}