我猜想你是想说鼠标经过图片的时候在图片的底部显示描述性文字吧？
这个实现起来非常困难，你应该也了解，css可以通过伪类实现一些互动效果，但是所有这些互动效果都有一个很大的限制，通过伪类只能实现事件发生元素本身的特效，比如，我们通过纯css不可能实现你点击一个按钮而改变一个文本框的背景色；
不过这个问题你只需稍微使用一点js就可以轻松搞定的；
不过按照你的要求，使用纯css，我给出的两种实现方式；
第一种：
<html>
<style type="text/css">
div{
width: 200px
height: 200px
margin:50px
background: #888
}
a{
display: block
width: 200px
height: 200px
text-indent: -9999px
background-image: url("./1.jpg")
}
a:hover{
text-indent: 10px
white-space: nowrap
text-overflow: clip
overflow: hidden
vertical-align: bottom
line-height:370px
color: #111
text-decoration: none
}
</style>
<body>
<div>
<a href="#">
河南人网上晒幸福 称幸福是早喝胡辣汤
</a>
</div>
<body>
</html>
第二种：
<html>
<style type="text/css">
div{
width: 200px
height: 200px
margin: 50px
background: #888
position: relative
}
img{
width:200px
height: 200px
}
a{
display: block
position: absolute
width: 200px
height: 200px
top: 0
left: 0
text-indent: -9999px
}
a:hover{
color: orange
text-decoration: none
white-space: nowrap
text-indent:10px
overflow: hidden
line-height: 370px
}
</style>
<body>
<div>
<img src="./1.jpg" />
<a href="#">
河南人网上晒幸福 称幸福是早喝胡辣汤
</a>
</div>
<body>
</html>
不过这两种方法与js实现方式相比很不实用，而且弊端较多，例如文字只能显示一行，最后文字的切割痕迹无法消除，网页内容与表现无法截然分离，所以纯css的实现基本上不会在专业的网站上使用。
但愿以上回答能让你满意。
第一步设置一个最外层div,左右再分两个div（这个div需要设置float，以保持两边水平排列），width设置为50%，里面放各种小div（第一个div要用clear：both保证清除float属性），div的高度可以用height设置。我给你写个框架，内容可以自己填。<div>
<div style="float:left">
<div style="clear:both"></div>
<div></div>
...
</div>
<div style="float:right">
<div style="clear:both"></div>
<div></div>
...
</div>
</div>
楼主的文字确实是居中的，不过只是你的div没有任何宽度和高度，而让你看不出文字是居中的而已，楼主要是不信，那可以试试以下代码，包你居中！<!DOCTYPE
HTML>
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8">
<title>无标题文档</title>
<style
type="text/css">
.one
{
margin:0
auto
width:150px
height:25px
background:#FF6
}
.STYLE1
{
font-family:
Arial,
Helvetica,
sans-serif
font-size:
12px
text-align:center
}
</style>
</head>
<body>
<div
class="one">
<div
class="STYLE1">看看是不是居中啦？</div>
</div>
</body>
</html>
