我无法将按钮居中并将其固定在浏览器的页脚中吗？

Question

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

You see removing these two will make the image work, but it don't stick to the footer when viewed in browser 您会看到删除这两个将使图像正常工作，但在浏览器中查看时不会粘在页脚上

here's how its look like 这是它的样子

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

and here's the css with html 这是带有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

I cant see images, buy you can try; 我看不到图片，可以尝试买；

   .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

I don't think you can use the auto margins trick if the element is set to position fixed. 如果元素设置为固定位置，我认为您不能使用auto边距技巧。 But you can have it this way: 但是您可以通过以下方式实现：

.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;
}

Just set the left margin to be half of the element's width. 只需将左边距设置为元素宽度的一半即可。

我无法将按钮居中并将其固定在浏览器的页脚中吗？

问题描述

2 个解决方案

解决方案1
0 2014-01-12 00:55:36

解决方案2
0 已采纳 2014-01-12 00:57:06

我无法将按钮居中并将其固定在浏览器的页脚中吗？

问题描述

2 个解决方案

解决方案1 0 2014-01-12 00:55:36

解决方案2 0 已采纳 2014-01-12 00:57:06

解决方案1
0 2014-01-12 00:55:36

解决方案2
0 已采纳 2014-01-12 00:57:06