左右对齐段落，并在页脚居中图像答案

【问题标题】：Align paragraphs to left and right, and center image on footer左右对齐段落，并在页脚居中图像
【发布时间】：2017-09-18 22:09:04
【问题描述】：

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

我如何做到这一点？我当前的代码将第二段换行。

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

【问题讨论】：

您是否尝试过使用“display:inline-block;”在图片上？
@Jnatalzia 是的，如果我这样做，文本对齐很好，但图像保持在左侧而不是居中。
老式排版机器有一个fill 命令，它会插入一个空格或前导，自动占用行上所有未使用的空间。我从来没有弄清楚如何做到这一点，所以它似乎在 css 中也能正常工作。可能应该做一些阅读。
图片有多高？比文字高？图像可以在另一行居中，行距减小得非常小吗？
你能重新排序 HTML 以使图像在三个内部元素中排在最后吗？

标签： css css-float text-align

【解决方案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

【讨论】：

【解决方案2】：

这是我最终做的：

在 DIV 上包含文本和图像，
将这些 DIV 的宽度百分比显式设置为每个 33.333%（1/3），
左浮动这些 DIV，
使用 text-align 来对齐 inside 那些 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;
}

【讨论】：

【解决方案3】：

您需要重新排列 HTML：

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

DEMO

【讨论】：

无论哪种方式都可以。即使是大字体。如果您希望文本基线与图片底部对齐，这会很棘手，但可以做到。在它上面尝试 ctrl-middle-mouse-wheel 并注意它们是如何不同时扩展的——至少在 Chrome 中是这样。不过它看起来不错。
那很容易position: absolute DEMO jsfiddle.net/kevinPHPkevin/hMN8f/2
这种方法背后的原因是什么？