css - 左右对齐段落，并在页脚居中图像

Question

我需要显示一个左对齐的段落，另一个右对齐的段落和一个居中的图像，所有这些都在网页页脚的同一行上。

我该如何做到这一点？我当前的代码将第二段放在新行上。

HTML

<div id="footer">
    <p class="alignleft">Text</p>
    <img id="logo" src="#">
    <p class="alignright">More text</p>
</div>

CSS

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

Hope this helps for you:

<div id="footer">
    <span>Text</span>
    <span><img src="http://www.klm.com/jobs/nl/images/icon_flight_32x32_tcm701-312701.gif" /></span>
    <span>More text</span>
</div>

#footer {
    width: 100%;
    display: table;
    table-layout: fixed;
    background: gray;
}
#footer span {
    display: table-cell;
}
#footer span:nth-child(2) { text-align: center; }
#footer span:last-child { text-align: right; }

JSFiddle DEMO

Answer 2

您需要重新排列 HTML：

<div id="footer">
    <p class="alignleft">Text</p>
    <p class="alignright">More text</p>
    <img id="logo" src="#" />
</div>

演示

Answer 3

这就是我最终做的事情：

• 将文本和图像附在 DIV 上，
• 将这些 DIV 的宽度百分比显式设置为每个 33.333% (1/3rd)，
• 左浮动这些 DIV，
• 使用 text-align 对齐这些 DIV中的元素。

无需更改我的 HTML 的顺序，并根据需要使用尽可能多的元素，只需更改百分比值！:)

代码

HTML

<footer>
    <div id="footerleft"><p>Text</p></div>
    <div id="footercenter"><img src="./img/logo.jpg" alt="Logo"></div> 
    <div id="footerright"><p>More Text</p></div>
</footer>

CSS

#footerleft {
    float: left;
    width:33.333%;
    text-align:left;
}

#footercenter {
    float: left;
    width: 33.333%;
    text-align: center;
}

#footerright {
    float: left;
    width:33.333%;
    text-align:right;
}