✔ Textausrichtung bzw. Ausrichtung vers. Elemente klappt nicht

B

BloodyRuler

Grünschnabel
Hallo zusammen
gerade erst habe ich ein Problem in HTML gehabt, schon tritt das nächste in CSS auf:
Meine Css-Datei:
CSS: 
body {background-color : #000000;
        color : #FFFFFF;
        text-align:center;
        vertical-align:middle;}
     
form {
    position:absolute;
    top:50%;
    right:50%;
 
}
img {
    text-align: center;
    vertical-align:top;
    width:50px;
    height:50px;
}
p {position:absolute;
    top:50%;
    right:50%;
    }
 
h2 {
     
text-decoration: underline;
}

Ich möchte folgende Punkte erreichen:

-Alle Elemente sollen zentriert angezeigt werden
-Die p-Absätze sollen genau in der Mitte sein (horizontal & vertikal)
-Die Überschrift soll über dem Bild angezeigt werden und unterstrichen sein
(-Die Schrift soll weiß, der Hintergrund schwarz sein)(bereits drin)

Probleme dabei:
-Überschrift ist neben dem Bild
-Die Texte sind nicht genau in der Mitte, sondern Mitte-links
(grün bedeutet erledigt :))

Ich hoffe ihr könnt mir hier erneut helfen :)
~BloodyRuler
 
Zuletzt bearbeitet:
HTML: 
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h2>
Hase
</h2>
<br>
<img src="hase.jpg">
<p>
Du bist ein Hase. Hasen sind von Natur aus talentiert und ehrgeizig. Sie sind oft beliebt, aber auch unsicher was Veränderungen betrifft. Aber auch geduldig sind die Hasen, denn sie treffen nur wohlüberlegte Entscheidungen, doch manchmal lassen sie sich auch von ihrem Tatendrang überwältigen.<br>
Die perfekten Partner für Hasen sind:<br>

</p>
</body>
</html>
 
Bleibt es bei dieser Anzahl der Elemente (jeweils eins), oder wiederholen sie sich?

Ich frage nur, weil ja für das <p>-Element eine vertikale Zentrierung erwünscht ist.

In welchem Kontext? Kompletter Bildschirm? Pro Zeile? ...?
 
Es bleibt bei 1Element/Datei
Jeweils ein p für jede Datei (insgesamt 12)
Es kommen auch keine zusätzlichen Elemente hinzu, so sollen alle 12 Dateien aussehen.
Hab ich die Frage damit beantwortet?
 
Die horizontale Zentrierung ist ja mit text-align:center für <body> eingerichtet.

Also entferne überall position:absolute, top:50% und left:50% (= außermittige Position im Viewport).

Für die vertikale Zentrierung siehe beispielsweise:
  1. https://blog.kulturbanause.de/2015/11/text-mit-css-vertikal-zentrieren/
  2. https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Inhalte_zentrieren#vertikale_Zentrierung
  3. http://maurice-web.de/css-vertikale-zentrierung-unbekannter-hoehe/
  4. http://www.ich-lerne-css.de/Style/Examples/007/center.html
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück