Richten Sie die Absätze nach links und rechts aus und zentrieren Sie das Bild in der Fußzeile - css, css-float, text-align

Ich muss einen nach links ausgerichteten Absatz, einen nach rechts ausgerichteten Absatz und ein zentriertes Bild in der Fußzeile einer Webseite anzeigen.

Wie kann ich das erreichen? Mein aktueller Code erhält den zweiten Absatz in einer neuen Zeile.

HTML

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

CSS

.alignleft {
float: left;
}

.alignright {
float: right;
}

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

Antworten:

2 für die Antwort № 1

Hoffe das hilft dir:

<div id="footer">
<span>Text</span>
<span><img src="/images/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

---

1 für die Antwort № 2

Hier ist, was ich getan habe:

• Einfügen der Texte und Bilder in DIVs,
• Setzen Sie den Breitenprozentsatz dieser DIVs explizit auf 33,333% (1/3).
• Left-Floating dieser DIVs,
• Verwenden Sie Textausrichtung, um die Elemente auszurichten Innerhalb diese DIVs.

Ich muss die Reihenfolge meines HTML-Codes nicht ändern und arbeitet mit so vielen Elementen wie nötig. Ändern Sie einfach den Prozentwert! :)

Code

HTML

<footer>
<div id="footerleft"><p>Text</p></div>
<div id="footercenter"><img src="/images/./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;
}

---

1 für die Antwort № 3

Sie müssen Ihren HTML-Code neu anordnen:

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

DEMO

---