Hallo liebes HTML.de-Forum!
Ich bräuchte Hilfe bezüglich Text RICHTIG mittig setzen.
Das sieht gerade so aus: (Siehe Anhang)
(Ja, die 50px Abstand rum Rand sind Absicht)
Margin-left:50% bzw. Left 50% sorgen zwar dafür,
dass es in der Mitte ist, aber es fängt logischerweise beim ersten Buchstaben an,
ich möchte jedoch das ganze Wort in der Mitte haben und selbst wenn sich die Textmenge ändert,
mittig beibehalten. Doch leider schaffe ich es bisher nicht ganz... Könnt ihr mir da weiterhelfen?
Vielen Dank & lG,
Kazel
und hier mein CSS & Html:
CSS:
HTML:
Ich bräuchte Hilfe bezüglich Text RICHTIG mittig setzen.
Das sieht gerade so aus: (Siehe Anhang)
(Ja, die 50px Abstand rum Rand sind Absicht)
Margin-left:50% bzw. Left 50% sorgen zwar dafür,
dass es in der Mitte ist, aber es fängt logischerweise beim ersten Buchstaben an,
ich möchte jedoch das ganze Wort in der Mitte haben und selbst wenn sich die Textmenge ändert,
mittig beibehalten. Doch leider schaffe ich es bisher nicht ganz... Könnt ihr mir da weiterhelfen?
Vielen Dank & lG,
Kazel
und hier mein CSS & Html:
CSS:
Code:
@charset "utf-8";
/* CSS Document */
body{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
.container{
position:absolute;
top:50px;
bottom:50px;
left:50px;
right:50px;
background: #007ee8;
background:-moz-radial-gradient(center, #007ee8, #00539a); /* Firefox */
background:-webkit-radial-gradient(center, #007ee8, #00539a); /* Safari, Chrome */
background:-ms-radial-gradient(center, #007ee8, #00539a); /* IE 10+ */
background:radial-gradient(center, #007ee8, #00539a); /* W3C Standard */
}
.hallo{
position:absolute;
color:#fff;
top:50%;
margin-left:50%;
font-size:61px;
line-height:72px;
font-weight:700;
border-top:5px solid #fff;
border-bottom:5px solid #fff;
text-indent:-4px;
}HTML:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hallo Welt</title>
</head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<body>
<div class="container">
<div class="hallo">HALLO WELT</div>
</div>
</body>
</html>Anhänge
Zuletzt bearbeitet: