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

希望这对你有所帮助：

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

DEMO

Answer 3

这是我最终做的事情：

将文字和图像封闭在DIV上，
明确将这些DIV的宽度百分比设置为33.333％（1/3），
左移这些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;
}

左右对齐段落，页脚中心图像对齐

HTML

CSS

3 个答案:

代码

HTML

CSS