Question

我想让我的图像在页面中间，左右两边都有文字，我使用这个html + css，但文字在图像后面。

html，css：

<style type="text/css">
  body {
    font-family: 'Noto+Sans', serif;
    font-size: 14px;
    color:  red;
  }
.centeredImage {
  position: absolute;
  margin: auto;
left: 0; 
right: 0;
top: 0;
bottom: 0;
} 
 #malakas img {
  float: left;
}  
</style>
  </head>
<body style="overflow:hidden; margin:0">
    <form id="form1" runat="server">
    <div id="main" style="background-color:black">
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
    </form>
    <script language="javascript">
        function autoResizeDiv()
        {
        document.getElementById('main').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
        /script>
        <div id="malakas">
  <img class="centeredImage" img src="images/eye.gif" alt="" />
    </div> 
    </body>
    </html>

我应该在不同的文件中使用别的东西还是css？

Answer 1

尝试使用z-index在后台获取图像

Answer 2

将Z-index设置为零以下（或低于文本元素的Z-index），如下所示：

.centeredImage {
      position: absolute;
      margin: auto;
      z-index:-1;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }

http://jsfiddle.net/xaMJA/

需要将图像放在页面中间，但文本会落后

2 个答案: