Question

我将这个CSS用于我的网站页脚：

什么是使其显示在页面中心的最佳方式。我的网站是响应式的，所以当屏幕变小时它们会自动相互下降，但是当屏幕较大时，它们比左边的更多。

我在这里创建了一个小提琴，所以你也可以看到html：http://jsfiddle.net/x4A4B/

任何帮助将不胜感激

#footer {
    width:100%;
    min-height:500px;
    position:relative;
    bottom:0;
    left:0;
    border-top:4px solid #F36F25;
    background-color:#666666;
    color:#EEEEEE;
}
#footer-inner {
    width:80%;
    margin:0 auto 0 auto;
    height:inherit;
}
#footer-top {
    width:100%;
    padding-top:10px;
    border-bottom:2px #EEEEEE solid;
    display:block;
}
#footer-left {
    width: 290px;
    display:inline-block;
    padding: 5px 15px;
    border-right:1px #EEEEEE solid;
    vertical-align:top;
}
#footer-middle {
    width: 294px; /* Account for margins + border values */
    display:inline-block;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
    border-right:1px #EEEEEE solid;
    vertical-align:top;
}
#footer-right {
    width: 270px;
    padding: 5px 15px;
    display:inline-block;
    vertical-align:top;
}
#footer-bottom {
    margin-top:5px;
    padding: 15px 15px;
    font-size:12px;
}

Answer 1

你在谈论你的版权标签吗？如果我理解正确，您需要text-align:center;中的footer-bottom，如

#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
text-align:center;
}

Answer 2

我认为你需要这样的布局：

<强> HTML：

<div class="wrapper">
    <div class="left">
        Content goes here
    </div>
    <div class="middle">
        Content goes here
    </div>
    <div class="right">
        Content goes here
    </div> 
</div>

<强> CSS：

.wrapper{
   position: relative;
   float: left;
   left: 20.00%;
   width: 60.00%;
}
.left{
   position: relative;
   float: left;
   left: 0%;
   width: 32.00%;
}
.middle{
   position: relative;
   float: left;
   left: 1.50%;
   width: 32.00%;
}
.right{
   position: relative;
   float: right;
   right: 0%;
   width: 33.00%;
}

当然，您必须用您的内容填充结构，并修改边距以完全满足您的需求，但我认为您将设法做到这一点。这个例子只是为了得到这个想法。

在此处查看此行动：JSFiddle

CSS页脚没有显示在中心

2 个答案: