Box erstellen mit mittigem Text

Mixed-John · 17 Dezember 2013

Hi leute,

ich versuche gerade eine farbige box mit einem Text,der genau in der Mitte von der box steht, zu erstellen.
Bis jetzt bekomme ich es aber nicht hin den Text zu zentrieren. Ich habe dazu immer Padding und prozentangaben genutzt aber das funktioniert iwie nicht richtig.
Hier mal mein Quelltext:
Css:
#Text{
width:650px;
height:100px;
text-align: center;
display:block;
color:white;
background-color:#dd1616;
padding:auto;
margin:auto;
}

#Text p{
padding:50%;

}

Html:

<div id="Text">
<p><font size="6">Ski</font></p>
</div>

djheke · 17 Dezember 2013

Hier eine von vielen Möglichkeiten

Code:

<!doctype html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<style>
p.center{
margin:0;
width:650px;
text-align: center;
padding:40px 0; /* Der obere und untere Wert + Schriftgröße entspricht ca 100px */
color:#fff;
background:#ada;

}
</style>
</head>
<body>
<p class="center">Ski</p>
</body>
</html>

Tronjer · 17 Dezember 2013

Um eine einzelne Zeile vertikal innerhalb eines Blockelements zu zentrieren, gibt man dieselben Werte für die CSS-Attribute height und line-height.

Box erstellen mit mittigem Text

Mixed-John

Neues Mitglied

djheke

Aktives Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge