javascript - 页脚居中 div

Question

我有一个页脚 div 和其他 div，左边有一个 Logo ，左边有 2 个 div，右边有另一个 div。我想将靠近中心的 div 居中，类为 cbtn 的按钮。

JSFIDDLE:http://jsfiddle.net/3G5YL/1/

这是我的代码:

<footer>
    <div id="footer"><div class="footerlogo"></div>
    <div id="to_the_top"></div>
    <div class="copyright"><p>&copy; Copyright 2012 Oh!</p><p>All Rights Reserved.</p></div>
<div  class="btn-group">
  <button class="cbtn btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Contacto <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
   <li><a href="#">Mail</a></li>
   <li><a href="#">Teléfono</a></li>
   <li><a href="#">Acerca de nosotros</a></li>
  </ul>
</div>  <div class="infof1"><p style="margin: 0px;line-height: 25px;padding-top: 3px;">9870 St Vincent Place, Glasgow, DC 45 Fr 45.</p><div class="phone">+1 800 603 6035</div><div class="mail">mail@companyname.com</div></div>
        <ul id="social">
            <li class="s1 rotate"></li>
            <li class="s2 rotate"></li>
            <li class="s3 rotate"></li>
            <li class="s4 rotate"></li>
            <li class="s5 rotate"></li>
            <li class="s6 rotate"></li>
            <li class="s7 rotate"></li>
            <li class="s8 rotate"></li>
        </ul>
    </div>
</footer>

CSS 代码:

#footer {
box-shadow: 0px 1px 2px 0px #e3e5e2;
background: #e5e5e5;
padding: 10px 0px 15px 0px;
border-bottom: 1px solid #dcdcdc;
display: inline-block;
    width: 96%;
margin: 0 2%;   
position: relative;
margin-bottom: 40px;
}


.footerlogo {

    background-position: 0px 661px;
    width: 61px;
    height: 60px;
    float: left;
    margin-left: 10px;
      -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;

}
.footerlogo:hover {
     -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.QcKGKEJO.dpuf
}
.copyright p {

line-height: 9px !important;

}

.copyright {
    margin-left: 17px;
    margin-top: 10px;
    display: block;
    font-family: Arial;
    font-size: 11px;
    color: #9b9b9b;
    font-weight: bold;
    float: left;

}
.infof1 {
display: block;
font-family: Arial;
font-size: 11px;
display: block;
margin-left: 22px;
line-height: 5px;
float: left;
color: #64686b;
}

.phone {

background-position: 0px 316px;
float: left;
height: 22px !important;
padding-left: 15px;
background-repeat: repeat-y;
padding-top: 0px;
margin-top: -5px;
line-height: 22px;
}

.mail {

background-position: 0px 292px;
float: left;
line-height: 6px;
height: 18px !important;
padding-top: 3px;
background-repeat: repeat-y;
margin-left: 20px;
padding-left: 23px;
}

#social  {
    display: block;
    margin-top: 15px;
float: right;
margin-right: 7px;
}
ul#social li  {
/* float: right; */
display: inline-block;
padding-right: 4px;

}

.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8 {
width: 25px;
margin-left: 10px;
height: 25px;
padding-top: 6px;
}

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;

    }   

.rotate:hover   
{ 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}   

.s1 {

background-position: 0px 591px;

}

.s2 {

background-position: 0px 562px;

}

.s3 {

background-position: 0px 534px;

}

.s4 {

background-position: 0px 504px;

}

.s5 {

background-position: 0px 475px;

}

.s6 {

background-position: 0px 445px;

}

.s7 {

background-position: 0px 416px;

}

.s8 {

background-position: 0px 385px;
margin-right: 5px;
}

Answer 1

在页脚 id 中添加文本对齐:

#footer{
  text-align: center;
}

JSFiddle:http://jsfiddle.net/3G5YL/1/