Question

我总是试图在屏幕底部保留一个div。并且由于div宽度小于屏幕所以它应该位于屏幕的中间。第一件事是工作，但如果总是左边漂浮。

代码是

    <div id="catfish" style="position:fixed; bottom:0;  z-index:5000; width: 468px; margin: 0px auto;">
        <div style="position:absolute;  margin-bottom:0px; z-index:15;">
            <a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img></a>
        </div>
        <div>
           Some elemnt here
        </div>
    </div>

jsfiddle example 请帮我。

Answer 1

You have to add left and right to your div with value 0. If you also want the your text in the middle you have to add text-align: center;

  <div id="catfish" style="position:fixed; bottom:0; left:0; right:0; text-align:center;  z-index:5000; width: 468px; margin: 0px auto;">
        <div style="position:absolute;  margin-bottom:0px; z-index:15;">
            <a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img></a>
        </div>
        <div>
           Some elemnt here
    </div
    </div>

Hope that helps!

Answer 2

Add a margin-left with the half of the width. Now you can move the container 50% from left. Here you can find a working example:

#catfish {
  position:fixed;
  bottom:0;
  z-index:5000; 
  background-color:#f00;
  left:50%;
  margin-left:-234px; /* Half of the width */
  width: 468px;
}

<div id="catfish">
  <div style="position:absolute;  margin-bottom:0px; z-index:15;">
    <a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'">
      <img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"/>
    </a>
  </div>
  <div>Some elemnt here</div>
</div>

Answer 3

<div id="catfish" style="position:fixed; bottom:0;  z-index:5000; margin: 0px auto;left: 50%;   transform: translateX(-50%);    padding-left: 30px;">
    <div style="position:absolute;  margin-bottom:0px; z-index:15;left: 0;">
        <a href="Javascript:void(0);" onclick="document.getElementById('catfish').style.display='none'"><img src="http://secretdiarybd.com/wp-content/uploads/2015/05/close.gif.png" alt="close" height="20"></img></a>
    </div>
    <div>
       Some elemnt here
</div
</div>

使用css将div保持在屏幕的中间底部

3 个答案: