Delphi-PRAXiS

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 22:48 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz