需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,填充问题基础代码。
2、在index.html中的标签中,输入样式代码:style="float: left;padding-top: 25px;"。
3、浏览器运行index.html页面,此时文字对准了图片的中间。
如果是普通模式,那就对图片、文字进行居中对齐和行高设置就可以了,代码如下:
.main{width:500px; height:350px; line-height:350px; margin:0 auto; background:url(img.gif) no-repeat;}
//设置宽度为500px,高度为350px,行高350px,相对于屏幕居中对齐,背景图片不重复
.txt{width:500px; height:350;line-height:350px; text-align:center;}
如果想要特效显示,可以参考下面代码:
。
把图片作为背景图加在文字所在区域,给出适当间距,如:
给文字设置行高 行高=这一行的高度
.txt{ height: 30px; line-height:30px;}
img{vertical-align:middle;}