Question

我希望将sign in按钮置于HERE中页面的水平和垂直中心。我已经尝试将锚标签放入另一个div但它没有用。我怎么能这样做？

Answer 1

中心事物是计算机科学中最难的问题。

实际上，这取决于您是想要垂直居中还是水平居中。水平居中可以通过在父级上设置text-align：center，或者通过赋予元素显式宽度和margin：auto;来实现。

垂直居中更加困难。您可以设置margin-top：或绝对定位元素的top：将其向下推，但你必须将它定位在（容器高度的50％） - （元素高度/ 2），CSS不能做自动。如果元素或它的容器更改高度，则需要手动或使用Javascript进行调整。

它仍然是一种相对较新的技术，但灵活的盒子模型非常适合这样做。它有点复杂，并且有许多供应商前缀和浏览器不一致可以解决，但你可以google它。

每个人都会因为这样说而恨我，但在我的日子里，我们刚刚用过一张桌子，继续我们的生活。请参阅表格单元格，允许您使用vertical-align：middle;完全按照你的期望去做。

#abusedTable{
    width: 100%;
}
#abusedTable td{
    height: 500px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
}

http://jsfiddle.net/arkanciscan/5WYmx/

Answer 2

您需要删除按钮上的绝对定位，并将“text-align：center”放在包含该按钮的div上。

Answer 3

将代码更改为此

HTML：

<div id="signupCover"><a id="signin_button" href="./index.php">Sign in</a></div>

的CSS：

#signupCover {

    background-color: #ccc;
    opacity:0.6;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
}

#signin_button{
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    background-color: #0096cc;
    padding: 14px 24px 14px 24px;
    font-size: 28px;
    font-weight:700;
    color: #cca;
    z-index: 99;
}
#signin_button:hover{
    background-color: #0277a3;
    color: white;
}

Answer 4

<style>
#signin_button{
    text-align: center;
    text-decoration: none;
    background-color: #0096cc;
    padding: 14px 24px 14px 24px;
    font-size: 28px;
    font-weight:700;
    color: #cca;
    z-index: 99;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    width:100px;
}
#signin_button:hover{
    background-color: #0277a3;
    color: white;
}
</style>
<a id="signin_button" href="./index.php">Sign in</a>

Answer 5

让您的代码如http://jsfiddle.net/judearasu/YvbZX/

<div>
<a href="javascript:void(0);">Sign In</a>
</div>

*{
  padding: 0px;
  margin:0px;
 }
div
 {
  background-color: #0096cc;
  padding: 14px 24px 14px 24px;
  font-size: 28px;
  font-weight:700;
  color: #cca;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100px;
  height:50px;
  margin: auto;
  text-align: center;
}

居中到屏幕

5 个答案: