如何使两边都有左右对齐的元素居中？答案

【问题标题】：How to center an element with a left and right aligned element on both sides?如何使两边都有左右对齐的元素居中？
【发布时间】：2014-07-13 04:00:28
【问题描述】：

我一直为我认为很容易的事情遇到很多麻烦，但结果却比我预期的要困难得多。

我有一个图像 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）。任何帮助将不胜感激！

相关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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

footer{
text-align:center;
}

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

#contactinfo{
float:right;
}

小提琴：http://jsfiddle.net/bonatoc/PLbae/1/

CSS 覆盖位于最底部。

【讨论】：

【解决方案2】：

你可以像this那样做

将#contactinfo div 移到#logoandtext 上方

HTML

<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>

CSS

#logoandtext {
    margin: 0 140px;
    text-align: center;
} 
#contactinfo {
    float: right
}

【讨论】：