html - 如何使两侧左右对齐的元素居中？

Question

我一直在为我认为很容易的事情遇到很多麻烦，但事实证明它比我预期的要困难得多。

我有一张图片 alt="home"，我想在页脚中居中，下面有文字，但是 margin-left 和 margin-right: auto 不起作用，margin: 0 auto 也不起作用.是否有其他选项可以让某物居中？

对于地址，它被下推了，因为版权和“主页”img 的宽度与页脚的宽度相同。当我尝试将宽度百分比应用于包含主页 img 和版权文本的 div 时，它出于某种原因消失了吗？

这是我想要达到的结果:http://i.imgur.com/khjrZow.jpg

jsfiddle(带有完整的 html 和 css):http://jsfiddle.net/A2H3n/

如果有人知道发生了什么，并且可以让我知道，那会让我很高兴......但实际上，我已经花了 4 个小时试图解决这个问题(我刚刚开始学习 CSS)。任何帮助将不胜感激!

相关的 HTML:

<footer>

    <div id="sociallinks">
        <img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
        <img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
    </div>

    <div id="logoandtext">  
            <img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
            <p>&copy; Hsien-Jin Martial Arts Studio<p>  
    </div>

    <div id="contactinfo">
        <p>7548 Mahogany Rd</p>
        <p>Los Angeles, CA 97789</p>
        <p>(444) 123-4567 </p>
    </div>


</footer>

相关 CSS:

    footer{
    overflow: hidden;
    display: block;
    margin: 0 auto;
    color: #FFFFFF;
}

#sociallinks{
    float: left;
    margin: 0;
    display: block;
    width: 20%;
    height: 100%;
}

.sociallogo{
    width: 3em;
    height: 3em;

}


#footerlogo {
    width: 4em;
    height: 4em;
    margin: 0 auto; 
}

#contactinfo {
    line-height: 1.25em;
    text-align: right;
}

Answer 1

display:inline-block; 可能是答案:

footer{
text-align:center;
}

#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}

#contactinfo{
float:right;
}

fiddle :http://jsfiddle.net/bonatoc/PLbae/1/

CSS 覆盖在最底部。