1

我知道它已经被问过几次了，但是在玩了一会儿后，我仍然无法集中我需要的东西。我想要做的是在页面上垂直居中这些按钮。我也想在它上面放置居中的文本。

我的（草率）代码：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;
}
4

3 回答 3

0

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

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

下面的示例链接：

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

于 2013-05-08T00:33:55.143 回答
0

检查这个：

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;
}
于 2013-05-08T00:50:17.590 回答
0

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

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是以 . 然而，由于我们可以使用text-align: center内联块居中，确切的宽度不是太重要，只要让它足够宽。

居中通过将所有位置值设置为 0（左/右/上/下）然后设置margin: auto.

这一切都基于 CSS 2.1，因此它应该可以在大多数浏览器中使用。唯一的限制是 IE7 无法识别的 inline-block 属性。

但是，由于您使用的是 CSS2 动画，因此 inline-block 可能没问题。

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

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

于 2013-05-08T03:02:00.840 回答