[HTML/CSS] Text in DIV vertikal zentrieren

Fluid Byte · Beitrag von **Fluid Byte** » 23.10.2007 10:57

Ich habe dutzende Artikel im Internet geselesen aber leider nichts brauchbares gefunden. Was ich machen möchte ist einen längeren Textblock (mehrere Zeilen) in einem DIV Container vertikal zentrieren. Da es sich um einen Block und nicht eine einzelne Zeile handelt kann ich "line-height:" nicht verwenden.

Ich habe unter anderem dieses Snippet benutzt:

Code: Alles auswählen

display: table-cell;
vertical-align: middle;

Funktioniert wunderbar, allerdings nur in Firefox.

Ich suche nach einer Lösung die folgende Bedingungen erfüllt:

- kompatibel mit mind. Firefox 2.xx und InternetExplorer 7.xx
- es muss ein Textblock und keine einzelne Zeile zentriert werden
- Es muss XHTML 1.0 Strict konform sein
- Die Höhe des DIV's ist variabel (nicht festgelegt)

Bin für jeden Tipp dankbar!

Beitrag von **bobobo** » 23.10.2007 11:28

ja ja ..div

kuck mal

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head> <title></title>
</head><body>
  <div style= "border:1px dashed Black;margin-left:25%;margin-right:25%;margin-top:25%;margin-bottom:25%; text-align: justify;">
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
   block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
   block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
   block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
   block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
   block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block   Text block   Text block   Text block   Text block
     Text block   Text block   Text block   Text block
   </div></body></html>

p kann auch div sein (d.h. p kann durch div ersetzt werden) und andersrum und egal

Fluid Byte · Beitrag von **Fluid Byte** » 23.10.2007 12:20

Code: Alles auswählen

<p> != <div>
horizontal != vertical
Blocksatz != Textblock

Guckst du hier:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Vertical Center</title>
		<style type="text/css">
			body {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 12px;
			}
			.textbox {
				width: 150px;
				height: 150px;
				background: #FFFFFF;
				border: dashed 1px #B0B0B0;
				border: dashed 1px gray;
				padding: 5px;
				margin-top: 50px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	
	<body>
		<div class="textbox">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
		</div>	
	</body>
</html>

AND51 · Beitrag von **AND51** » 23.10.2007 17:11

display:table-cell
habe ich noch nie gehört, gibt's das überhaupt?
Ansonsten schau einfach mal auf selfHTML.org @ CSS/vertical-align

// Edit:
Logisch gedacht, muss eine Höhe angegeben werden (wie beim Link), denn sonst weiß der Brwoser ja gar nicht, in welchem Bereich er vertikal zentrieren soll.
Wenn die Höhe variabel bleiben soll, nimmst du einfach prozentuale Höhenangaben.
Ansonsten gibst du an, wie der Brwoser mit den Daten umgehen soll, die nicht umgebrochen werden dürfen, wenn der Platz (z. B. bei prozentualen Größenangaben) zu klein ist (overflow).

DarkDragon · Beitrag von **DarkDragon** » 23.10.2007 17:16

AND51 hat geschrieben:display:table-cell
habe ich noch nie gehört, gibt's das überhaupt?

Ja.

http://de.selfhtml.org/css/eigenschafte ... tm#display

Fluid Byte · Beitrag von **Fluid Byte** » 23.10.2007 17:29

display: table-cell
habe ich noch nie gehört, gibt's das überhaupt?
Ansonsten schau einfach mal auf selfHTML.org @ CSS/vertical-align

ROFL!

Glaubst du Ich denk mir das aus oder was? Es ist recht enfach AND51. Mit der CSS Anweisung "display: table-cell" kannst du einem beliebigen Element die Eigenschaften einer Tabellenzelle zuweisen. Somit natürlich auch die Fähigkeit des (einfachen) vertikalen Zentrierens mittels "vertical-align".

Logisch gedacht, muss eine Höhe angegeben werden (wie beim Link), denn sonst weiß der Brwoser ja gar nicht, in welchem Bereich er vertikal zentrieren soll.
Wenn die Höhe variabel bleiben soll, nimmst du einfach prozentuale Höhenangaben.
Ansonsten gibst du an, wie der Brwoser mit den Daten umgehen soll, die nicht umgebrochen werden dürfen, wenn der Platz (z. B. bei prozentualen Größenangaben) zu klein ist (overflow).

Ein Beispiel vielleicht?

AND51 · Beitrag von **AND51** » 23.10.2007 18:04

@ DD: Danke

@ Fluid:
> Glaubst du Ich denk mir das aus oder was?
Nein, ich dachte nur, du hättest vielleicht etwas verwechselt oder so. Ich habs gerade unter DD's Link nachgelesen. Den Absatz hab ich die Tage schon mal geelesen, aber nicht zuende... Sonst hätte ich das sofort gesehen...

> Ein Beispiel vielleicht?
Hier:

Code: Alles auswählen

davor
<div style="width:100%;height:100%;text-align:center;background-color:red;">
<p style="position:relative;top:50%;"><font size=7>gross</font><font size=2>klein</font></p>
</div>
danach

Es scheint wirklich nicht in einem Tag zu gehen, wie ich dachte!

Erklärung: "davor" und "danach" beweisen, dass DIV ein Block-Element ist, ebenso tut dies die rote Hintergrundfarbe, auf die man nicht allzulange starren sollte.

Das Eltern-Element DIV ist also 100% breit und hoch, nimmt also den gesamten verfügbaren Platz ein.

Der Trick: Nun brauchen wir ein weiteres Block-Element, das wir als Child-Element einsetzen. Dies kann auch ein DIV-Element sein, zur Demo hab ich aber mal P genommen.

Der Kern: Wir verschieben den Inhalt des Child-Elements um 50% nach unten. Dies funktioniert, wenn wir POSITION:RELATIVE festlegen, was eine Verschiebung relativ zum Eltern-Element bewirkt. Da das Elternelemnt eine starre Größe hat, kann man den Child-Content wunderbar daran ausrichten.

Das ist die meste Methode, die ich in dieser kurzen Zeit gefunden habe; Wenn du mehrere Zeilen vertikal zentrieren willst, wirst du feststellen, dass der Text nach unten fortgestezt wird; dem wirkst du entgegen, wenn du den Child-Content tatsächlich nur 45% von oben verschieben lässt.

Wenn das alles nichts hilft, dann nimmste den folgenden Magic-Wunder-Code:

Code: Alles auswählen

<marquee style="width:100%;height:100%;" direction="top">
...I N H A L T...
</marquee>

Beitrag von **bobobo** » 23.10.2007 19:03

Fluid Byte hat geschrieben:I
- Die Höhe des DIV's ist variabel (nicht festgelegt)

damit ist die seitenhöhe auch variabel (bzw. abhängig von der zeilenanzahl
in deiner textbox),gell

ansonsten wirz nix mit der zentrierung vertikalerseits

s.o. mein angepasster code ..

AND51 · Beitrag von **AND51** » 23.10.2007 19:50

Was ist denn eine Seitenhöhe?

Ansonsten bleibt noch zu sagen:
1.) Du kannst den ganzen MARGIN-Kram zusammenfassen:

Code: Alles auswählen

<div style="margin:25%;">

Gilt für alle 4 Seiten

2.)Dein Code fungiert einfach nur als "Abstandhalter". Füge mal vor deinem DIV mehrere durch BR getrennte Zeilen ein. Dein Text wiord einfach nach unten verschoben.
Dein Ansatz ist ein raffinierter, jedoch nicht vollständig ausgeklügelter. Gefällt mir trotzdem

3.) Mal lieber PADDING statt MARGIN benutzen? (PADDING=Innenabstand, MARGIN=Außenabstand)

@ Fluidi:
Geht es auch, dass du für deinen Textblock einen reservierten Bereich mit sagen wir mal 250px Höhe reservierst und deinen Text darin vertikal zentrierst? Dann hätt ich noch ne Idee...

Beitrag von **bobobo** » 24.10.2007 13:51

das unaufgedröselte margin mag der ie letztlich nicht so recht.

und padding macht alles hässlich (der rahmen sollte schon um den text liegen)

unten geht es auch ganz ohne margin und padding. (etwas verschachtelt
und vercsst)

die seitenhöhe ist die höhe der im browser dargestellten seite.
die seitenhöhe sollte bei variablem inhalt der zentrierten box
eben auch variabel (es sei denn du passt die zeichengröße gleich mit an
oder) sein

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head> <title></title>
</head><body>
  <div style= "position:absolute;left:25%;top:25%;right:25%;bottom:25%;text-align: justify;">
<span style="display:block;border:1px dashed Black;">"  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
     Text block   Text block   Text block   Text block
  Text block 12 Text block 123 Text block 1234 Text block 12345  Text block 123456 Text block   Text block   Text block   Text
     Text block   Text block   Text block   Text block</span>
</div></body></html>

PureBoard

[HTML/CSS] Text in DIV vertikal zentrieren

[HTML/CSS] Text in DIV vertikal zentrieren

Re: [HTML/CSS] Text in DIV vertikal zentrieren