Question

我知道有几次被问过，但是在玩了一下之后，我仍然无法将我需要的东西放在中心位置。我想要做的是将这些按钮垂直放在页面上。我也想把中心文本放在它上面。

我的（草率）代码：JsFiddle

HTML：

<div>
    <a href="#" id= "mail" class="cbtn"></a>
    <a href="#" class="cbtn"></a>
    <a href="#" class="cbtn"></a>
    <a href="#" class="cbtn"></a>
    <a href="#" class="cbtn"></a>
</div>

CSS：

div {
    text-align: center;
}

a {
    text-align: center;
    margin: auto;
}

.cbtn {
    display:inline-block;
    width:60px;
    height:60px;
    border-radius:50px;
    background:transparent;
    border: solid gray 1px;
    margin: 2px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.cbtn:hover {
    text-decoration:none;
    background:#F3734F;
}

#mail {
    background-image:url(http://data.novicode.com/data/img/mail.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
}

Answer 1

您可以在div上设置以下规则：

div {
  position: absolute;
  left: 50%;
  height: 50%;
  margin-top: -(height of div);
  margin-left: -(width of div);
}

以下示例链接：

http://jsfiddle.net/AT8S6/1/

Answer 2

检查一下：

http://jsfiddle.net/AT8S6/

您可以更改部分的宽度，高度和边距属性以获得不同的结果。

<强> HTML

<div>
<section>
<a href="#" id= "mail" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
<a href="#" class="cbtn"></a>
</section>
</div>

<强> CSS

    div {
    text-align: center;
    height:400px;
    width:100%;
    border:2px #000 solid;
}

a {
    text-align: center;
    margin: auto;
}

div section {
     width:65%;
    height:50%;
    margin:20% auto;
}


.cbtn {
    display:block;
    width:60px;
    height:60px;
    border-radius:50px;
    background:transparent;
    border: solid gray 1px;
    margin: 2px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
    float:left;
}

.cbtn:hover {
    text-decoration:none;
    background:#F3734F;
}

#mail {
        background-image:url(http://data.novicode.com/data/img/mail.png);
    background-position:50% 50%;
    background-repeat:no-repeat;
}

Answer 3

这是一种方法，假设您希望按钮在页面上水平和垂直居中。

HTML是：

<div class="wrap">
    <div class="button-wrap"> 
        <a href="#" id="mail" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
        <a href="#" class="cbtn"></a>
    </div>
</div>

，CSS是：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 100%;
    width: 100%;
}

.button-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 60px;
    width: 350px;
    margin: auto;
    text-align: center;
}

您需要将body和html元素的width和height属性声明为100％，div.wrap则相同。

诀窍是将div.button-wrap中的链接/按钮包裹起来，这是绝对定位和给定特定的宽度和高度值以匹配按钮。 60px的高度基于.cbtn的高度，350px的宽度是5倍（60px + 2x2px + 2x1px + 4x1em），大约350px。但是，由于我们可以使用text-align: center来对内联块进行居中，因此确切的宽度不是太关键，只需要足够宽。

定心的工作原理是将所有位置值设置为0（左/右/上/下），然后设置margin: auto。

这完全基于CSS 2.1，所以它应该适用于大多数浏览器。唯一的限制是内联块属性，IE7无法识别。

但是，由于您使用的是CSS2动画，因此内联块可能没问题。

小提琴参考：http://jsfiddle.net/audetwebdesign/METYC/

整页视图：http://jsfiddle.net/audetwebdesign/METYC/show

垂直居中<div> s多行</div>

3 个答案: