Delphi-PRAXiS - HTML/CSS - DIV zentrieren

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - HTML/CSS - DIV zentrieren (https://www.delphipraxis.net/88592-html-css-div-zentrieren.html)

Neutral General

17. Mär 2007 18:33

HTML/CSS - DIV zentrieren

Hi,

Ich habe das hier:

Code:

			<div class="klasse">

   <div class="inhalt">

     Bla

     Bla

   </div>

</div>

Wie kann ich "inhalt" sowohl horizontal als auch vertikal in "klasse" zentrieren?

Gruß
Neutral General

Matze

17. Mär 2007 18:56

Re: HTML/CSS - DIV zentrieren

Hi,

horizontal könnte es mit margin: auto klappen, vertikal hast du ohne weiteres keine Chance, sofern sich die Höher von "Klasse" dynamisch ändert. Aber solche Fragen und zahlreiche Problemlösungen gibt es bei Google hoch und runter, wieso sucht du denn nicht zuerst mal? :?

Neutral General

17. Mär 2007 19:03

Re: HTML/CSS - DIV zentrieren

Hi,

Ja ich hab bei Google nach CSS Tutorials gesucht und mir ein paar durchgelesen aber da war nie ne Lösung zu finden..
Ich guck nochmal...

Gruß
Neutral General

cruiser

17. Mär 2007 19:11

Re: HTML/CSS - DIV zentrieren

AFAIK ist es im CSS-Standard zumindest bis 2.1 nicht vorgesehen, vertikal zu zentrieren.

Pfoto

17. Mär 2007 19:13

Re: HTML/CSS - DIV zentrieren

Hi!

wie Muetze schon schreibt, ist "margin: auto;" korrekt
und eigentlich CSS konform.
Leider interpretiert nur der IE < 7 das nicht und du musst
mit "text-align: center;" diesen Bug umgehen.

Da du wahrscheinlich linksbündig schreiben willst, musst
du dem nachfolgdnen Elmenet wieder ein "text-align: left;"
mit auf den Weg geben.

Zum Thema: "vertikales Zentrieren in CSS" kannst du

hier mal schauen.
(Aber wie schon geschrieben ist es kein CSS-Standard)

Gruß
Pfoto

Matze

17. Mär 2007 19:25

Re: HTML/CSS - DIV zentrieren

Zitat:

Zitat von Pfoto

wie Muetze schon schreibt, ist "margin: auto;" korrekt

Ich bin nicht Muetze. :stupid:

margin: auto meiner Webseite interpretiert der IE6 bei mir korrekt.

Neutral General

17. Mär 2007 19:48

Re: HTML/CSS - DIV zentrieren

Hab was gefunden:

klasse muss das Attribut

Code:

display: table;

haben und inhalt muss die Attribute

Code:

			display: table-cell;

vertical-align: middle;

haben, dann gehts...

Pfoto

17. Mär 2007 21:18

Re: HTML/CSS - DIV zentrieren

Zitat:

Zitat von Matze

Zitat:

Zitat von Pfoto

wie Muetze schon schreibt, ist "margin: auto;" korrekt

Ich bin nicht Muetze. :stupid:
Oh, sorry... :oops:
margin: auto meiner Webseite interpretiert der IE6 bei mir korrekt.

Du hast recht, der Fehler war auch nur im "Quirks Mode" des IE6,
der ja dann die noch älteren Varianten simuliert.

Gruß
Pfoto

cruiser

17. Mär 2007 21:32

Re: HTML/CSS - DIV zentrieren

Zitat:

Zitat von Neutral General

Hab was gefunden:

.....

dann gehts...

Frage: Geht das auch mit den body selbst? Nur so aus Interesse ;)

DGL-luke

17. Mär 2007 22:09

Re: HTML/CSS - DIV zentrieren

So?

Code:

			data:text/html, <html><body style="display: table; height: 100%"><div style="display: table-cell; vertical-align: middle; margin:auto;height: 100%">blubb</div></body></html>
		

(in adressleiste kopieren)

Alle Zeitangaben in WEZ +1. Es ist jetzt 14:02 Uhr.