Question

我正在使用这种语法创建两列左列对齐左，右列对齐右。语法很完美！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  html {height:100%;}
  body {height:100%; margin:0; padding:0;}
  #bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
  #content {position:relative; z-index:1;}
</style>
<style type="text/css">
.wrap {
  width: 1060px;
  height:auto;
  margin: auto;
   text-align:center;
  position:relative;
}
.text_over_image {
  position: absolute;
  margin: auto;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  color:#fff;
  height:100px;
}
</style>

</head>

<body>
<div id="bg">
<img src="C:Image1.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<div>
  <span style="float: left;">
    <font size="30" color="red">Text1</font><br>    
    <img src="C:\1.jpg" alt="" style="width:425px;height:500px;">
  </span>
  <span style="float: right;">
    <font size="30" color="red">Text2</font><br>    
    <img src="C:\2.jpg" alt="" style="width:425px;height:500px;">
  </span>
</div>
<div style="height: 650px;"></div>
<div>
  <span style="float: left; clear:both">
    <font size="30" color="red">Text3</font><br>    
    <img src="C:\3.jpg" alt="" style="width:425px;height:500px;">
  </span>
    <span style="float: right;">
    <font size="30" color="red">Text4</font><br>    
    <img src="C:\t.jpg" alt="" style="width:425px;height:500px;">
  </span>
</div>
<div style="height: 650px;"></div>
</body>
</html>

您可以在下面的语法中看到省略对.wrap的调用。如果我在.wrap标记中添加对<div>的调用，则会删除列结构。

如何将文字置于图像中心并维护通过调用#bg?

创建的列结构

Answer 1

请勿使用false标记添加图片。通过CSS <img>属性添加关键字background，如下所示。

no-repeat center center fixed

保持列对齐时图像上的中心文本

1 个答案: