Question

http://i.imgur.com/SXgTt.png

你看到删除这两个会使图像工作，但在浏览器中查看时它不会粘在页脚上

这是它的样子

http://i.imgur.com/gdBMr.png

这是带有html的css

<style>
    body {
        text-align: center;
        background-color: #080707;
        font-family: "Open Sans", sans-serif;
    }

.enter {
    display: block;
    width: 165px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 30px;
    border: 2px solid #c52f30;
    color: #cf2f32;
    margin: 30px auto 0;
    text-decoration: none;
    position:fixed;
    bottom:23px;

    }
.enter:hover {
    background: #cf2f32;
    color: white;
        -webkit-transition: background 0.4s ease, color 0.4s ease;
        -moz-transition: background 0.4s ease, color 0.4s ease;
        -o-transition: background 0.4s ease, color 0.4s ease;
        -ms-transition: background 0.4s ease, color 0.4s ease;
        transition: background 0.4s ease, color 0.4s ease; }
</style>


 <body>
    <p><img src="images/fullbg.png" style='width:100%; max-width: 800px;' border="0" alt="Null"></p>
    <a  href="#" class="enter">Enter</a>
 </body>

Answer 1

我看不到图像，但你可以试试;

   .enter {
        display: block;
        width: 165px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 30px;
        border: 2px solid #c52f30;
        color: #cf2f32;
        margin: 0 0 0 -83px;;
        text-decoration: none;
        position:fixed;
        bottom:23px;
        left:50%;
    }

Answer 2

如果元素设置为固定位置，我认为你不能使用auto边距技巧。但你可以这样做：

.enter {
  display: block;
  width: 165px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 30px;
  border: 2px solid #c52f30;
  color: #cf2f32;
  margin: 30px 0 0 -82px;
  text-decoration: none;
  position:fixed;
  left: 50%;
  bottom:23px;
}

只需将左边距设置为元素宽度的一半即可。

我不能将按钮居中并将其修复到浏览器页脚？

2 个答案: