Question

这是我的小提琴

我需要将按钮放在中央位置，并在页脚的每个位置周围加一点填充物。

我非常接近，但按钮似乎从页面底部溢出？

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

div#footer{
    width:100%;
    height:10%;
    bottom:0;
    top:90%;
    left:0;
    background-color:#2A2A2A;
    position:fixed;
    display:table-cell;
    vertical-align:middle;
}


#button {
    height : 90%;
    width : 30%;
    background-color : #FFFFFF;
    margin:1.666%;
    text-align:center;
    float:left;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}
#button:before {
    content:'';
    height:10%;
    vertical-align:middle;
    display:inline-block;
}

<div id="footer">
    <div id="button">button text</div>
    <div id="button">button text</div>
    <div id="button">button text</div>
</div>

Answer 1

我已经改变了很多你的css，这就是我现在所拥有的：

http://jsfiddle.net/wf_4/8BJ94/78/

html, body {
    height:100%;
    width:100%;
    margin:0;
}
html {
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
    background:#48a;
    text-align:center;
}
div#footer {
    width:100%;
    height:10%;
    min-height:40px;
    bottom:0;
    left:0;
    background-color:#2A2A2A;
    position:fixed;
    padding:8px;
    display:table;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.button {
    height : 50%;
    width : 30%;
    background-color : #FFFFFF;
    margin:auto 2%;
    display:table-cell;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}
.button:before {
    content:'';
    height:100%;
    vertical-align:middle;
    display:inline-block;
}
.buttonGap {
     height:50%;
     width:1%;
     display:inline-block;
 }

和HTML：

<div id="footer">
    <div class="button">button text</div>
    <div class="buttonGap"></div>
    <div class="button">button text</div>
    <div class="buttonGap"></div>
    <div class="button">button text</div>
</div>

Answer 2

我认为你需要的是： http://jsfiddle.net/e2262/1/

什么让你的页脚变得不那么垂直（高度是）

div#footer {
  height:10%;
  top:90%;
}

因此我可以在CSS中获得这两个属性。现在它固定在底部，随着按钮的增长，页脚的高度可以增长;）

注意：永远不要使用具有CSS id属性的多个元素。我换了CSS类

Answer 3

只需将按钮类的高度设置为较小，如下所示（注意：我将按钮ID更改为类，因为id应该是唯一的 - 也是其中一位评论者指出的）：

.button {
    height : 60%; // <-- changed this
    width : 30%;
    background-color : #FFFFFF;
    margin:1.666%;
    text-align:center;
    float:left;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}

<强> Fiddle here

Answer 4

我使用flex-box更新了我的解决方案：

HTML：

<div id="footer">
    <div class="button">button text</div>
    <div class="button">button text</div>
    <div class="button">button text</div>
</div>

CSS：

    div#footer{
        position:fixed; 
        height: 10%;
        bottom:0;
        left:0;
        right:0;
        background-color:#2A2A2A;     
        padding:0;
        margin:0;
        text-align:center;  
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #footer .button {
        display: inline-block;
        background-color : #FFFFFF;            
        -webkit-border-radius: 1em;
        -moz-border-radius: 1em;
        border-radius: 1em;
        width: 30%;
        height: 80%;
        line-height: 25px;
    }

JSFiddle

试图创建一个灵活的3按钮页脚

4 个答案: