• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Text zentrieren in HTML

Status
Für weitere Antworten geschlossen.

andrésmx

Neues Mitglied
Hallo Leute,
ich wollt wissen ob der Text zentriert ist, wenn das nicht der Fall ist, könnt ihr mir stattdessen ein vollständigen Code schicken wo es zentriert ist. Ich wäre euch sehr dankbar für eure Hilfe.

Hier der Code

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{background-color:lightblue;}
.container p{margin-left: 50px;
              margin-right: 50px;
                line-hight:1.3;}
.text1 h1{margin:30px 45px;}
.text1 h1{margin:30px 45px;}
.text2 h1{margin:30px 45px;}
.text3 h1{margin:30px 45px;}
</style>
</head>

<body>
<div class="container">
<div class="text1">
<h1>Überschrift 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>

<div class="text2">
<h1>Überschrift 2</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

<div class="text3">
<h1>Überschrift 3</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</body>
</html>
 
Werbung:
Hallo Andrésmx

Willst du jede einzelne Textzeile zentrieren? Oder nur bestimmte Textpassagen, damit sie sich vom anderen Text unterscheiden?

Im ersteren Fall ist die Lösung von Oliver korrekt.

Im zweiten Fall kannst du das mit margin-left und margin-right machen. Das funktioniert auch in deinem Beispiel.

Das hat jetzt nichts mit deinem Problem zu tun: Mit "line-hight" hast du dich vertippt. die CSS-Anweisung lautet "line-height".
 
Werbung:
CSS:
.text1 p,.text2 p,.text3 p   {
    text-align:center;
}

Eigentlich reicht:
CSS:
p {
text-align:center;
}

Für den Fall, dass neben den Paragraphen/Absätzen <p> auch die Überschriften <h1>, die nunmal auch gleichberechtigt zum Textgerüst zählen (beachte hierzu auch den gewählten Topic des TE's), und aus diesem Grund (mit-an-Wahrscheinlichkeit-grenzender-Sicherheit) gleichermaßen innerhalb der CSS-Klasse .container zentriert erscheinen sollen, um letztlich dem aufmerksamen Beobachter/Leser ein rundum harmonisch vollendetes Erscheinungsbild zu präsentieren, lautet die CSS-Regel kurz und schmerzlos:
CSS:
.container{text-align:center}

Abschließend zwei Demos für "Look & Feel":
  1. https://jsfiddle.net/SpiceLab/29q41vks/1/ (komplett zentriert)
  2. https://jsfiddle.net/SpiceLab/29q41vks/2/ (<p> zentriert, <h1> linksbündig gemäß o.g. margin-Vorgaben)
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben