1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。
3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。
text-align:center 只能用来控制文字居中的（注意text这个单词），图片是不听它使唤的。你所说的效果有多种实现方法，比较流行的方法是把图片作为背景图，文字则单独控制其显示位置，比如：
.story_class {
width: 200px
height: 100px
background: url(./images/story_1.png) no-repeat 40px 30px
}
.story_class h3 {
width: 100px
height: 40px
margin-left: 90px
margin-top: 30px
line-height: 40px
}
<div class="story_class">
<h3>精品散文</h3>
</div>
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。
2、在index.html中的<span>标签中，输入样式代码：style="float: leftpadding-top: 25px"。
3、浏览器运行index.html页面，此时文字对准了图片的中间。
