0

我想把按钮放在HEREsign in中页面的水平和垂直居中。我曾尝试将锚标记放入另一个 div，但它没有奏效。我怎样才能做到这一点？

4

5 回答 5

2

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

实际上，这取决于您是要垂直居中还是水平居中。水平居中可以通过在父元素上设置 text-align: center 来实现，或者通过给元素一个明确的宽度和 margin: auto;

垂直居中更加困难。您可以设置 margin-top: 或绝对定位元素的 top: 以将其向下推，但您必须将其定位在 (50% of container height) - (element height / 2)，这是 CSS 无法做到的自动地。如果元素或其容器的高度发生变化，您需要手动或使用 Javascript 进行调整。

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

每个人都会讨厌我这么说，但在我那个年代，我们只是用一张桌子继续我们的生活。查看表格单元格允许您使用垂直对齐：中间；做你期望它做的事情。

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

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

于 2013-09-24T18:19:50.067 回答
0

让你的代码像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;
}
于 2013-09-24T18:52:07.350 回答
0

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

于 2013-09-24T18:03:06.030 回答
0

把代码改成这个

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;
}
于 2013-09-24T18:10:03.513 回答
0 
<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>
于 2013-09-24T18:26:46.940 回答