Question

似乎无法弄清楚为什么这段代码不起作用。我希望按钮位于页面底部的中心位置。我有代码让它们留在页面的底部，但我无法让它们居中。除非我使用但不“感觉”就像这样做。

参见JSFiddle上的示例：http://jsfiddle.net/c99Hh/2/

HTML：

    <div id ="footer" style="margin:auto">
        <div class="nails-footer-buttons">But01</div>
        <div class="nails-footer-buttons">But02</div>
        <div class="nails-footer-buttons">But03</div>
        <div class="nails-footer-buttons">But04</div>
    </div>

CSS：

            #footer{        
                    position: fixed;
                    bottom: 0;
                    width: 100%;
            }


            .nails-footer-buttons {
                -moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
                -webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
                box-shadow:inset 0px 1px 0px 0px #c1ed9c;
                background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
                background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
                background-color:#9dce2c;
                -webkit-border-top-left-radius:15px;
                -moz-border-radius-topleft:15px;
                border-top-left-radius:15px;
                -webkit-border-top-right-radius:15px;
                -moz-border-radius-topright:15px;
                border-top-right-radius:15px;
                -webkit-border-bottom-right-radius:0px;
                -moz-border-radius-bottomright:0px;
                border-bottom-right-radius:0px;
                -webkit-border-bottom-left-radius:0px;
                -moz-border-radius-bottomleft:0px;
                border-bottom-left-radius:0px;
                text-indent:0;
                border:1px solid #83c41a;
                display:inline-block;
                color:#ffffff;
                    font-family: 'Lato', sans-serif;
                font-size:15px;
                font-weight:bold;
                font-style:normal;
                height:60px;
                line-height:60px;
                text-decoration:none;
                text-align:center;
                text-shadow:1px 1px 0px #689324;
                    width: 70px;
            }

提示非常感谢。

Answer 1

你能试试吗，添加了margin:0 25%;

CSS：

#footer{        
    position: fixed;
    bottom: 0;
    width: 100%;
    margin:0 25%;
}

HTML：

<div id ="footer" >
    <div class="nails-footer-buttons">But01</div>
    <div class="nails-footer-buttons">But02</div>
    <div class="nails-footer-buttons">But03</div>
    <div class="nails-footer-buttons">But04</div>
</div>

演示：http://jsfiddle.net/c99Hh/3/

Answer 2

试试这个：的 FIDDLE

CSS：

#footer{ position: fixed; bottom: 0; left:50%; margin-left: -150px; width: auto; }

您还需要从html标记中删除style="margin:auto;"。

Answer 3

将样式text-align：center应用于页脚元素或CSS。

<div id ="footer" style="margin:auto;text-align:center;">

Answer 4

您可以使用align ='center'

    <div id ="footer" align='center' >
       <div class="nails-footer-buttons">But01</div>
       <div class="nails-footer-buttons">But02</div>
       <div class="nails-footer-buttons">But03</div>
       <div class="nails-footer-buttons">But04</div>
    </div>

它不是最好的方法，但应该可行

以可扩展的div块为中心

4 个答案: