需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。
2、在index.html中的<span>标签中，输入样式代码：style="float: left;padding-top: 25px;"。
3、浏览器运行index.html页面，此时文字对准了图片的中间。
如果是普通模式，那就对图片、文字进行居中对齐和行高设置就可以了，代码如下：
<style>
.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;}
<div class='main'>
<div class='txt'>显示的文字内容</div>
</div>
如果想要特效显示，可以参考下面代码：
<style>
body {
text-align: center;
font-family: "Microsoft YaHei", "Microsoft Yahei", "微软雅黑", "", "Courier New", "Helvetica Neue", Courier, monospace;
background-color: #f1f1f1;
}
.pic-wrapper{
display: block;
position: relative;
margin: 15px auto;
width: auto;
height: auto;
background-size: contain;
transition: all ease .3s;
}
.pic-wrapper img{
display: block;
position: absolute;
z-index: 10;
top:0;
left: 0;
}
.pic-wrapper .words-wrapper {
display: table-cell;
position: relative;
margin: 0;
text-align: center;
vertical-align: middle;
z-index: 50;
background-color: rgba(0,0,0, .3);
transition: all ease-out .6s .1s;
}
.pic-wrapper .words-wrapper:hover {
background-color: rgba(0,0,0, .7);
}
.pic-wrapper .words-wrapper:hover .words {
opacity: 1;
}
.pic-wrapper .words-wrapper:hover .sub-title {
transform: translateY(5px);
}
.pic-wrapper .words-wrapper:hover .title {
transform: translateY(-5px);
}
.pic-wrapper .words-wrapper .words{
width:auto;
height: auto;
display: block;
margin: auto;
text-align: center;
vertical-align: middle;
transition: all ease .5s;
opacity: .5;
cursor: pointer;
}
.pic-wrapper .words-wrapper .title,
.pic-wrapper .words-wrapper .sub-title{
display: block;
color: #fff;
margin: 0;
font-weight: normal;
transition: all ease .5s .05s;
}
.pic-wrapper .words-wrapper .sub-title{
font-size: 24px;
margin-top: 10px;
}
.pic-wrapper .words-wrapper .title{
font-size: 30px;
}
body,td,th {
font-family: "Microsoft YaHei", "Microsoft Yahei", "微软雅黑", , "Courier New", "Helvetica Neue", Courier, monospace;
}
</style>
<script>
var arg ={
items:
[
{ "pid":42,
"image":"图片路径",
"width":图片宽度,
"height":图片高度,
"words":{
"title":"文字内容"
}
},
{ "pid":1,
"image":"图片路径",
"words":{
"title":"文字内容"
}
},
{ "pid":2,
"image":"图片路径",
"words":{
"title":"文字内容"
}
}
]
};
(function m(parentWrapper){
template = [
'<div class="pic-wrapper" id="','1','" style="','3','" >',
'<section class="words-wrapper" style="','6','">',
'<div class="words">',
'<h1 class="title">','10','</h1>',
'<h2 class="sub-title">','13','</h2>',
'</div>',
'</section>',
'</div>'
];
var arr = arg.items||[];
var len = arr.length;
var t = function(img,i,arr,width,height){
temp[1] = "wrapper_"+arr[i]["pid"];
temp[3] = "width:" + width+"px;height:"+height+"px;";
temp[6] = "width:" + width+"px;height:"+height+"px;";
temp[10] = arr[i].words.title;
temp[13] = arr[i].words.subTitle;
var html = temp.join("");
nodes[i].outerHTML = html;
document.getElementById("wrapper_"+arr[i]["pid"]).appendChild(img);
//这里可以添加向IE7兼容的定位计算
};
if(len>0){
var temp = template.concat();
var m = function(i){
var img_my = new Image();
var _i = i;
var item = arr[_i];
img_my.onload = function(){
if(1){
var width = item["width"]||img_my.width;
var height = item["height"]||img_my.height;
t(img_my,_i,arr,width,height);
img_my.width = width;
img_my.height = height;
}
};
img_my.src = arr[i].image;
};
var node= document.createElement("div");
node.className = "pic-wrapper";
for(var i = 0; i< len;i++) {
var nodeCopy = node.cloneNode(true);
parentWrapper.appendChild(nodeCopy);
var nodes = document.getElementsByClassName("pic-wrapper");
m(i);
}
}
})(document.body);
</script>。
<div style="background:url(*.gif) no-repeat center left;text-align:left;padding:10px 10px 10px 30px;color:black;">文字、背景图居中，左对齐</div>
.txt{ height: 30px; line-height:30px;}
<div class="txt"><img />文字</div>
三克油啊
|
广告 您可能关注的内容 |
