• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Zum Xten: Div vertikal zentrieren

M

mojo78

Member
Hi Leute,
ich möchte Text in einem Div vertikal zentrieren. Ich weiß, dass die gleiche Frage schon x mal gepostet wurde, ich raffs nur anscheinend nicht, probiere schon den halben Tag rum :evil::icon8:

Code: 
<div style="background-color:#FFFFFF; width:500px; height:100px; text-align:center; border:1pt solid #CCCCCC;" >
Testtext
</div>

Also, wie schaffe ich es, dass der Text vertikal im div zentriert wird?
Bin für jede Antwort dankbar.
Ciao, Mojo
 
dkdenz schrieb:
vertical-align: Vertikale Ausrichtung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
vertical-align: Vertikale Ausrichtung: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Vergiß' in diesem Fall allerdings Dein Konstrukt (weil block-Element).

Ansonsten:
css text vertikal positionieren - Google-Suche
Zum Vergrößern anklicken....

Danke für die Antwort.
OK, es funktioniert, wenn ich einfach die line-height genau so hoch mache wie der Div ist. Aber nur für einzeilige Texte, für diesmal reicht mir das. Eine vertikale Zentrierung für einen beliebigen Text wie in einer normalen Tabelle scheint somit mit Divs nicht möglich zu sein.
Bye Mojo
 
mojo78 schrieb:
Eine vertikale Zentrierung für einen beliebigen Text wie in einer normalen Tabelle scheint somit mit Divs nicht möglich zu sein.
Zum Vergrößern anklicken....

Doch, das geht:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <title>Text in der Mitte</title>
  <style type="text/css">
    .rahmen {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
	<div class="rahmen" style="display: table; height: 400px; width: 300px; #position: relative; overflow: hidden;">
		<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
			<div class="rahmen" style=" #position: relative; #top: -50%">
			hier ein Text<br />
			noch ein Text<br />
			und noch ein Text<br />
			jetzt ist Schluss
			</div>
		</div>
	</div>
</body>
</html>
 
:D
Ja perfekt, das ist genau das was ich gesucht habe. Danke!

Habs gerade mal durch die aktuellen Browser gejagt: Firefox, Opera, Konqueror, IE7 - sieht überall Spitze aus. Danke.
 
Kann mir jemand auf die Sprünge helfen?: Warum steht im von anna55 geposteten Code vor "position" und "top" jeweils ein "#"? Ist das valider Code?
 
noidea schrieb:
Kann mir jemand auf die Sprünge helfen?: Warum steht im von anna55 geposteten Code vor "position" und "top" jeweils ein "#"? Ist das valider Code?
Zum Vergrößern anklicken....

Nein, das ist kein valides CSS. Die Raute ist ein Selektor für die IEs. 6er und 7er IE berücksichtigen den Code. Richtige Browser wie FF, Opera und Safari übergehen diese nicht standardkonformen Angaben. Wenn Du valides CSS schreiben willst, was sicher richtig ist, kannst Du valide Hacks einsetzen:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Text vertikal mittig</title>
<style type="text/css">
.rahmen {
border: 1px solid green;
} /* just borders to see it */
*+html #abstand {
	position: relative;
}
* html #abstand {
	position: relative;
}
#abstand {
	display: table;
	height: 400px;
	width: 300px;
	overflow: hidden;
}
*+html #text {
position: absolute;
top: 50%;
}
* html #text {
position: absolute;
top: 50%;
}
#text {
display: table-cell;
vertical-align: middle;
}
*+html #kasten {
position: relative;
top: -50%;
}
* html #kasten {
position: relative;
top: -50%;
}
</style>
</head>
<body>
    <div id="abstand" class="rahmen">
        <div id="text">
            <div id="kasten" class="rahmen">
            hier ein Text<br />
            noch ein Text<br />
            und noch ein Text<br />
            jetzt ist Schluss
            </div>
        </div>
    </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben