CSS Text (im footer) zentriert + rechtsbündig

CitroenDsVier · 30. Juli 2015

Hallo zusammen,

ich suche eine Möglichkeit, Text im footer mittig und rechtsbündig anzuzeigen. Ich möchte also einen bestimmten Text zentriert haben und in der selben Zeile am rechten Bildschirmrand 'nen link.

Ist das möglich, wenn ja wie?

MfG, V40

Nanotic · 30. Juli 2015

Klar ist das möglich. Informier dich mal über ID unc class. Damit kann man Elementen sozusagen Variablen zuordnen über die man diese dann stylen kann.
Soll die Seite responsiv sein?

CitroenDsVier · 31. Juli 2015

Ja schon klar, habe den "rechten" Text mit 'text-align: right;' gestyled. Jetzt steht der allerdings eine Zeile darunter. Ich meinte aber in der selben Zeile wie das zentrierte.
Richtig responsive ist nicht nötig. Kommt evtl später noch.

Hat denn noch jmd eine Idee?

CitroenDsVier · 2. August 2015

Ich habe das Problem leider immer noch nicht gelöst bekommen...

Falls man es sich schlecht vorstellen kann, das ist (aufs wichtige reduziert und mit styles mal inline) mein code, Ziel ist es, das "test2" in der selben Zeile zu haben wie "test".

HTML:

<!DOCTYPE html>
<html>
<head>
	<!--<link rel="stylesheet" href="style.css" type="text/css">-->
</head>
<body>
	<footer style="border-radius:5px; background:#ccc; margin: 0 auto;"><p style=" float:center;">test</p><p style="float:right;">test2</p></footer>
</body>
</html>

Ich wäre für ein paar Antworten dankbar!

MoOderSo · 2. August 2015

Probier mal sowas:

HTML:

<footer style="border-radius:5px; background:#ccc; margin: 0 auto;">
  <p style="display:inline-block;width:33%;margin-left:33%;text-align:center;">mitte</p>
  <p style="display:inline-block;width:33%;text-align:right;">rechts</p>
</footer>

CitroenDsVier · 2. August 2015

Super, danke! Jetzt habe ich nur das Problem, dass wenn ich die Höhe des footers auf 30px setze (wie ich sie vorher hatte), der Text halb im und halb außerhalb des footers steht...

MoOderSo · 2. August 2015

Also entweder du lässt die Höhe beim Footer weg, dann passt er sich dem Inhalt an oder du machst die Schrift so klein, dass es reinpasst oder du machst das mittlere p breiter, so dass mehr Text reinpasst.
Such dir was aus.
Mit margin-top:0 beim p solltest du auch noch etwas Raum gewinnen können.

CitroenDsVier · 2. August 2015

Lasse ich die höhe weg, sinds etwa 60px.
Schrift verkleinern passt dann nicht mehr zum Rest..

aber margin-top hab ich jetzt auf 3px gesetzt, damit ists auch vertikal zentriert (da fällt mir vertical-text-align ein... zu spät

)

Danke für deine Hilfe!

Suche

CSS Text (im footer) zentriert + rechtsbündig

CitroenDsVier

Lt. Commander

Nanotic

Lieutenant

CitroenDsVier

Lt. Commander

CitroenDsVier

Lt. Commander

MoOderSo

Gast

CitroenDsVier

Lt. Commander

MoOderSo

Gast

CitroenDsVier

Lt. Commander

Ähnliche Themen