Question

我有下一个HTML代码，我想将版权范围放到页脚中心，但我可以把它们放到顶部中心。我需要在CSS中更改什么？

<div class="main">   
    <div class="footer">
        <span class="copyright">some text block</span>
    </div>
</div>

和下一个CSS

.main { width: 100%; height:1563px;  background:url(../images/1.jpg) 50% 0 no-repeat ; overflow:hidden; position:relative;min-height:100%; }
.footer {position:absolute;  bottom:0;  width:100%;  text-align:center;   height:60px; background-color: #CDCBB8}
.copyright { font-family:"Myriad Pro", sans-serif; font-size:14px; color:#999; display: inline-block;    vertical-align: middle; line-height: normal; }

Answer 1

为版权设置line-height:60px：

jsFiddle

.copyright { 
font-family:"Myriad Pro", sans-serif; 
font-size:14px; color:#999; 
display: inline-block;    
vertical-align: middle; 
line-height: 60px;  /* as the height of container  */
}

或将line-height:60px设置为对象：

.footer {
position:absolute;  
bottom:0;  width:100%;  
text-align:center;   
height:60px;
line-height:60px;  /*  as the height  */
background-color: #CDCBB8
}

注意：如果您的版权中有多行，则最好将line-height:60px设置为容器并将line-height:1;设置为版权。 DEMO

Answer 2

在http://jsfiddle.net/dfW66/

上查看

.main {
    width: 100%;
    height:1563px;
    background:url(../images/1.jpg) 50% 0 no-repeat;
    overflow:hidden;
    position:relative;
    min-height:100%;
}
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    height:60px;
    background-color: #CDCBB8
}
.copyright {
    font-family:"Myriad Pro", sans-serif;
    font-size:14px;
    color:#999;
    line-height: 60px;
}

将行高设置为60px。

Answer 3

vertical-align:middle可以通过将display和.footer的{{1}}属性更改为.copyright和table来实施，如下所示：

table-cell

然后您的.footer{ display:table; } .copyright{ display:table-cell; }会将版权文本移到垂直中间位置。

Answer 4

写：

.footer{display:table;}
.copyright{display:table-cell;}

Fiddle here.

Answer 5

如果只是您想要居中的文字，您可以这样做：

text-align: center;

如果你想让整个div居中，给它一个宽度并调用

margin: 0 auto;

就可以了。

将跨度移动到页脚div的中心

5 个答案: