Question

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

我有一张图片alt =＆＃34; home＆＃34;我希望以我的页脚为中心，文本在其下方，但是左边距和边距右边：自动不工作，边距：0自动也不起作用。还有其他选择可以集中体现吗？

对于地址而言，由于版权和＆＃34; home＆＃34;的宽度，它被推倒了。 img的宽度与页脚的大小相同。当我尝试将宽度百分比应用于包含home 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;
}

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

CSS覆盖位于最底层。

Answer 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
}

如何在两侧使用左右对齐元素居中元素？

2 个答案: