需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：div {width: 200pxborder: 1px solid bluetext-align: center}。
3、浏览器运行index.html页面，此时span在div中成功水平居中了。
span{display:blockwidht:宽度值自己定； text-align:center}这里是控制水平居中。
还可以 span{display:blockpadding:值 } 这里值 设置为相同的 就可以
如：padding: 0 10px水平居中 左右间距为10px
或者 padding:10px 0 上下垂直居中， 上下间距：10px；
亦或者： padding ：10px 上下左右各 10px
span元素内是不应该嵌套span元素的。这是错误的写法。请使用div等块级元素嵌套实际上你要是把这三个span换成div的话，至少文字方面的排版问题就解决了。位置问题可以用margin和float来调整
