CSS - Ausrichtung in der Mitte eines div - tags

Questionmark

Hallo,

ich habe mir einen div Abschnitt festgelegt mit festgelegter Höhe und Breite. Jetzt möchte ich, dass mein Text sowohl bezogen auf die Breite als auch auf die Höhe des div Abschnitts mittig erscheint.

text-align:center; funktioniert einmalig aber
vertical-align:middle; ist ohne Wirkung.

Ist das der falsche Befehl?

Viele Grüße

Ronald

Moin!

'vertical-align:middle' - so etwas gibt es. Wenn es nicht funktioniert, dann muß es woanders dran liegen.

Hab ich die URL übersehen?

Fragt ....

Ronald

Questionmark

Also als Warnung vorneweg:

Auf der Website siehts etwas schlampig aus, weil ich gerade versuche mich zum ersten Mal mit CSS anzufreunden....

Ganz genau mittig wird der Text auch nie werden, da ich ja mein Menü mit so nem 5px großen Rand umgeben habe um Abstand zwischen den einzelnen Button zu haben - aber es sind mehr als 5px Unterschied! Außerdem ändert sich nichts an der Ausrichtung, wenn ich statt "middle" "top" oder "bottom" angebe.

Hier der Link
http://www.10-fragen.de

Vielen Dank fürs Fehler suchen,
Questionmark

Ronald

So, ich hab mal eben mein Wissen aufgefrischt:

Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.

Einzige Variante: Wenn der Text einzeilig ist, kannst du ein line-height mit der gleichen Angabe wie das height des Div setzen. Bei mehrzeiligem Text: Pech gehabt, geht nicht mehr vernünftig.

Ansonsten: nimm eine Tabelle, schließlich sind die ja dafür da.
Bei Tabellenzellen funktioniert das vertical-align.

G.a.d.M.

Ronald

Questionmark

Ohhhh, schade!

Na, dann muss ich wohl oder übel wohl doch vorerst noch zu einer Tabelle greifen, obwohl ich doch hier im Forum gelernt habe, dass man Tabellen nur da verwendet, wo auch im geschriebenen Text eine Tabelle stehen würde....

Damit muss ich mich dann wohl noch etwas gedulden.

Trotzdem danke für deine Hilfe!

Grüße,
Questionmark

Ronald

Zitat von Questionmark

Na, dann muss ich wohl oder übel wohl doch vorerst noch zu einer Tabelle greifen, obwohl ich doch hier im Forum gelernt habe, dass man Tabellen nur da verwendet, wo auch im geschriebenen Text eine Tabelle stehen würde....

Dazu mag ich bald nichts mehr sagen. hören kann ich es schon lange nicht mehr.

Grundsätzlich:

Tabellen für HTML wurde geschaffen um damit HTML-Seiten zu gestalten. Ob du in die Tabellen nun Text oder Grafiken packst, ob du Tabellenzellen längs oder quer miteinander verbindest - das alles ist die als Webemaster freigestellt, genau so, wie es dir am besten paßt.

Alle Browser verstehen Tabellen. Es gibt für Tabellen unheimlich viele Styles, Head-, Body- und Foot-Tags, verschiedene Rahmen, as auch immer - Styles ohne Ende. Heute, in einer Zeit, wo Stylesheets langsam die HTML-Formatierungen ablösen, gibt es das alles auch in CSS.

Nun möge mir jemand verraten, wozu das alles, wenn nur einer von 10.000 Webmaster irgendwelche Daten tabellarisch auf seine Internetseite packt?

Leider gibt es aber ein paar User, die meinen, sie wissen mehr als andere. Diese paar User machen sich verdammt breit und erzählen allen, daß Tabellen nicht dafür geschaffen wurden, Webseiten zu stylen. Dabei zitieren sie sich dann fleißig gegenseitig und jeder weiß es noch ein wenig besser als der andere.

Irgendwie erinnert mich das ein wenig an Till Eulenspiegel, an Atomkraftgegner, militante Nichtraucher, Wehrdienstverweigerer, Porschehasser - alle haben Argumente, aber alle eben nur einseitig.

Auf wen du höen willst, entscheide bitte selbst - ich erstelle meine Internetseitenmit mit alledem, was HTML & Co. hergibt. Warum sollte ich auf Funktionen verzichten, die zwar vorgesehen sind, aber einigen wenigen Usern nicht passen?

http://de.selfhtml.org/html/tabellen/layouts.htm

G.a.d.M.

Ronald

Questionmark

Zitat von Ronald

Dazu mag ich bald nichts mehr sagen. hören kann ich es schon lange nicht mehr.

Das tut mir Leid, nerven wollte ich nicht

Da bin ich wohl einem oder auch mehreren Porsche hassenden Till Eulenspiegeln augesessen

Vielen Dank für die Richtigstellung und den geschichtlichen Exkurs - werd jetzt wieder ohne schlechtes Gewissen Tabellen verwenden, natürlich gepaart mit CSS Kenn ja jetzt jemand Erfahrenen, auf den ich verweisen kann, wenn mich jemand anmault mit dem Hinweis, dass Tabellendesign nicht professionell genug ist....

Es grüßt,
Questionmark

Peter

Hi Questionmark,

Du muss nicht gleich die flinte ins Korn werfen.....

Es GIBT Lösungen, ein Div mittig mittig zu bekommen.

Zitat

Ronald schrieb:
Es ist immer noch so: vertikale Zentrierung in Div-Tags geht nicht.
Das soll u.U. mit CSS 3 kommen, da ist dann wieder die Frage, wann es auch die passenden Browser dazu gibt.

Ronald das ist leider..... FALSCH

Ganz korrekt und ohne Bastelei geht das schon über Netscape/Firefox...
mit

Vertical-Align !!!!

allerdings, ist das dann wie eine Tabelle, und dann ist es wirklich leichter,
das ganze direkt als echte tabelle mit <table> zu machen, dann funktioniert
Vertical-align nämlich auch mit dem Internet Explorer , wie Roland bereits schrieb!!!!

beim Explorer muss man ohne <table> etwas kräftiger in die Trickkiste greifen, aber es geht auch !!!

hab ein bischen in Google gewühlt, und tatsächlich eine Lösung für den internet Explorer gefunden !!Hab eine kleine Modifikation vorgenommen, so dass es auch alles mittig mittig ist, und unter mein Tutorial gehängt !!

Gruß Peter

hab alles mal schön zusammengefasst und in HTML gebannt

http://<br>http://wow.bundderalten.servegame.org/tutorial_divs_vertikal_ausrichten.html</a><br>

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//DE">
<html>
<!--
   HTML 3.2
   Document type as defined on http://www.w3.org/TR/REC-html32
-->
<head>
       <title> Div sollen Mittig erscheinen </title>
<style type="text/css">
   .table {
   	  display:table;
   }
   .tr {
   	  display:table-row;
   }

   .oben {
   	 position:relative;
   	 border:2px;
   	 border-style:ridge;
   	 text-align:center;
   	 vertical-align:top;
   	 width:200px;
   	 height:200px;


   	 display:table-cell;   	 


   }
   .mitte{
   	 position:relative;   	
   	 border:2px;
   	 border-style:ridge;
   	 text-align:center;
   	 vertical-align:middle;
   	 width:200px;
   	 height:200px;

   	 display:table-cell;  	 
   }
   .unten{
   	 position:relative;   	
   	 border:2px;
   	 border-style:ridge;
   	 text-align:center;
   	 vertical-align:bottom;   	
   	 width:200px;
   	 height:200px;


   	 display:table-cell;
   }

		#outer {width:200px;height: 200px; overflow: hidden; position: relative;}
		#outer[id] {display: table; position: static;}

		#middle {position: absolute; top: 50%;width:100%} /* for explorer only*/
		#middle[id] {display: table-cell; vertical-align: middle; position: static;}

		#inner {position: relative; top: -50%} /* for explorer only */
		/* optional: #inner[id] { position: static} */

		/* just format */
		div.greenBorder {border: 1px solid green; background-color: ivory}




</style>


</head>
<body >


  




    [b]Zuerst die klassische Variante, Div inhalte Vertikal zu mitten,



	  Dazu verwendet man eine Tabelle, in denen du die Spalten mit CSS formatierst 



	  innerhalb der spalte sind dann alle divs je nach wunsch vertikal positioniert!



      


	  verwendet vertical-align in < td >
	[/b]
  </p>


<table>
<tr>
<td style="vertical-align:top;width:200px;height:200px;border:3px;border-style:ridge;text-align:center">
      <div id="div in Tabelle oben" style="border:2px;border-style:ridge">
        [b]ich bin ein DIV[/b]



        [b] ->oben<- [/b]



        [b]durch hilfe einer tabelle[/b]
      </div>
</td>
<td style="vertical-align:middle;width:200px;height:200px;border:3px;border-style:ridge;text-align:center">
      <div id="div in Tabelle mittig" style="border:2px;border-style:ridge">
        [b]ich bin ein DIV[/b]



        [b] ->mittig<- [/b]



        [b]durch hilfe einer tabelle[/b]
      </div>
</td>
<td style="vertical-align:bottom;width:200px;height:200px;border:3px;border-style:ridge;text-align:center">
      <div id="div in Tabelle mittig" style="border:2px;border-style:ridge">
        [b]ich bin ein DIV[/b]



        [b] ->unten<- [/b]



        [b]durch hilfe einer tabelle[/b]
      </div>
</td>
</tr>
</table>














  





    [b]Nun die "echte" CSS Variante, Divs Vertikal zu mitten,



	  geht allerdings NUR in Netscape/Firefox



	  


	  verwendet hierbei den 'Display'-Befehl von CSS und 'vertical-align' 



	  ist allerdings nahezu das gleiche wie mit < table >,


	   daher nicht umbedingt praktikabel !!
	[/b]
  </p>
 
  <div id="ich bin eine Tabelle" class="table">
    <div id"ich bin eine Reihe" class="tr">
      <div id="ich bin Spalte 1" class="oben">
        <div id="jetzt das Div" style="border:2px;border-style:ridge;">      
        [b]
          ich bin eine DIV Tabelle 



	      ->oben<-

 
	       gehe allerdings NUR in Netscape
	    [b]    
	    </div>
      </div>
      <div id="ich bin Spalte 2" class="mitte" >
        <div id="jetzt das Div" style="border:2px;border-style:ridge;">     
        [b]
          ich bin eine DIV Tabelle 



	      ->Mitte<-

 
	       gehe allerdings NUR in Netscape
	    [b]
	    </div>
	  </div>
       <div id="ich bin Spalte 3" class="unten">
        <div id="jetzt das Div" style="border:2px;border-style:ridge;">       
        [b]
          ich bin eine DIV Tabelle 



	      ->unten<-

 
	       gehe allerdings NUR in Netscape
	    [b]
	    </div>
      </div>
    </div>
  </div>



  


    




    [b]Jetzt eine Variante, mit der man das direkte DIV sowohl unter Netscape/Firefox,



	  als auch unter dem Internet Explorer mittig positioniert..



	  ohne die klassische < table > Funktion von HTML
	[/b]
  </p>



 
<div id="outer" class="greenBorder">
	<div id="middle">
		<div id="inner" class="greenBorder" align="center">
           <div id="jetzt das Div" style="width:100px;border:2px;border-style:ridge;text-align:center"> 		   
			hier kann


			[b]irgentwas stehen[/b]


			alles mittig


	        </div>
		</div>
	</div>
</div>    






</body>
</html>

Alles anzeigen

Questionmark

Zitat von Peter

Es GIBT Lösungen, ein Div mittig mittig zu bekommen.

Danke für den Hinweis, Peter,

hab mir das Ganze mal angeschaut, aber nach Ronalds letztem Post bin ich zu dem Schluss gekommen, nicht alles über CSS erzwingen zu müssen um dem modernen Webdesign zu genügen. Und wie du schon selbst gesagt hast, scheint mir in diesem Fall der <table>-Tag wirklich um einiges praktikabler...

Grüße

Ronald

Zitat von Peter

Ronald das ist leider..... FALSCH

Nein, es war schon genau richtig: innerhalb eines Div-Tag gibt es keine vertikale Zentrierung.

Was du machst, ist Div-Tags so lange zu schachteln, bis es irgendwann wie eine vertkale Zentrierung ausieht.
Das sind aber zwei verschiedene Schuhe.

G.a.d.M.

Ronald

Peter

Schau mal bitte den Quelltext im code block an
(Bitte mit Firfox & Family anschauen !!)

Der inhalt ist doch mittig, oder was meinst du ??

da beisst die Maus kein Faden ab.

Es geht halt leider nunmal nur im Netscape/Firefox...
Dass der Internet explorer zu doof ist heisst noch lange nicht, das es nicht geht, oder ?

das mit dem IExplorer mittels <table> Div-inhalte mittig zu setzen sind ,war wirklich etwas unglücklich
formuliert, gebe ich ehrlich zu

Zitat

Peter schrieb:
das ganze direkt als echte tabelle mit <table> zu machen, dann funktioniert
Vertical-align nämlich auch mit dem Internet Explorer , wie Roland bereits schrieb!!!!

das stimmt leider nicht so ganz, asche über mein haupt , aber solange man beim DIV Container keine direkte Grössenangabe zur höhe macht, hat man in einem <Table> den gleichen optischen effekt im Internet explorer!!

und wenn ich bei meinem Div rahmen abstand zum text haben möcht, verwende ich halt padding

Wenn ich mit meinem Auto nicht direkt durch den Euro Tunnel von Frankreich nach England fahren kann, packe ich mein Auto halt auf einen Zug....
So betrachtet fahre ich doch dann auch mit meinem Auto durch den Tunnel, oder ??

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//DE">
<html>
<!--
   HTML 3.2
   Document type as defined on http://www.w3.org/TR/REC-html32
-->
<head>
       <title> Div sollen Mittig erscheinen </title>


</head>
<body >






      <div id="text mittig" style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;border:2px;border-style:ridge">
        [b]ich bin ein DIV[/b]



        [b] ->mittig<- [/b]



        [b]gehe aber nur in Netscape[/b]

      </div>

	  <div id="text mittig" style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;border:2px;border-style:ridge">


lkjasbbvla jkgbvlavjbav
aölghkaeölgkaeölg kaeöekrgalärghk
eaölghkaäegkheäakghbäelkgäkehgkeg
ägkhaeä köghaäehgäle thktgä ehgäkkaehg
eegaägkha ägkhaeäghaetä thnae äkthaö#egh
a egtjaäeth jhaäehj

      </div>




</tr>
</table>




</body>
</html>

Alles anzeigen

Ronald

Zitat von Peter

Schau mal bitte den Quelltext im code block an
(Bitte mit Firfox & Family anschauen !!)

Der inhalt ist doch mittig, oder was meinst du ??

da beisst die Maus kein Faden ab.

Klar ist der Text mittig - aber nicht mittig in einem Div-Tag, sondern mittig in einem Table-Tag: Mit "display:table-cell;" defenierst du, daß das div sich wie eine Tabellenzelle verhalten soll, dazu gehört aber dann auch, daß das Zellen-Tag (<tr>) in HTML mit definiert wurde. Eine Tabellenzelle kann immer nur innerhalb einer Tabelle (<table>) und der darunterliegenden Tabellenzeile (tr) dargestellt werden. Das CSS 'display' ist im Grunde nichts als ein Schalter.

In deinem Beispiel fehlt jedoch die komplette Tablestruktur, und du erzeugst damit fehlerhaften HTML-Quelltext, was in diesem Fall die Validatoren nicht bemerken, da Stylesheets von Ihnen noch nicht (richtig) verarbeitet werden.

So gesehen verhält sich in diesem Fall der IE richtig, Mozilla versucht deinen Fehler durch seine Fehlertoleranz auszugleichen.

Auf jeden Fall ist der Sinn der display-Eigenschaft ein völlig anderer, als er von dir verwendet wird, lies mal z.B. bei SelfHTML nach.
Richtig eingesetzt müßte das ganze z.B. so aussehen:

Code

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;border:2px;border-style:ridge">
      [b]ich bin ein DIV[/b]



      [b] ->mittig<- [/b]



      [b]gehe aber nur in Netscape[/b]
    </td>
  <td>
 <tr>
</table>

Alles anzeigen

und dann ist dein falscher Zauber vorbei.

Es sind und bleiben zwei verschiedene Schuhe, auch wenn du noch so viele Krücken baust.

In einem Div-Tag kann man zur Zeit noch keinen Text vertikal zentrieren, das soll erst mit CSS 3 kommen.
Das war die Fragestellung des Threads.

G.a.d.M.

Ronald

Peter

ich will jetzt echt nicht mehr mit dir streiten....

nur weil man mit speziellen css eigenschaften ein Div dazu bringt, sich wie eine tabelle zu verhalten, heisst noch lange nicht das da die klassische <table> Funktion dahinter steckt....es ist halt eine table funktion von CSS denn css soll ja bekanntlich eine Erweiterung oder Alternative zum klassischen HTML sein

Zitat

Roland schrieb
Klar ist der Text mittig - aber nicht mittig in einem Div-Tag, sondern mittig in einem Table-Tag: Mit "display:table-cell;" defenierst du, daß das div sich wie eine Tabellenzelle verhalten soll, dazu gehört aber dann auch, daß das Zellen-Tag (<tr>) in HTML mit definiert wurde.

und da du so gerne Self HTML zitierst, tue ich das hiermit auch mal:

http://de.selfhtml.org/css/eigenschaf…ung.htm#display

selfHTML Beispiel:

HTML

<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body>


<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td">bin</div>
  <div class="td">eine</div>
  <div class="td">Tabelle</div>
 </div>
</div>


</body></html>

Alles anzeigen

Zitat

SelfHTML schreibt:
Erläuterung:
Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.

Da wir es laut obriger Beschreibung wohl mit einem Zitat "waschechten Tabelle aus Divs" zu tuen haben, beziehen sich auch die evnt. verwendeten zusatzfunktionen wie z.B. Vertical-align auf diese Zitat "waschechten tabellen aus Divs", oder lügt SelfHTML etwa ???

ergo: ein Div kann laut CSS beschreibung ein Vertical-align !!!!!
Was der Browser draus macht, wissen wir bei vielen CSS sachen, ist eine andere Sache....

und die sache mit dem einsamen Display:table-cell Div über das du dich so aufregst....

Stimmt....ich hätte event. eine div verschachtlung machen müssen, um die klassische <table> funktion zu simulieren...
aber ich hätte ja auch
display:inline nehmen dürfen laut w3c:

Zitat

W3 schreibt
'display'
Value: inline | block | list-item | run-in | compact | marker | table |inline-table| table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial: inline
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all

Alles anzeigen

Zitat

w3 schreibt:
'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
Inherited: no
Percentages: refer to the 'line-height' of the element itself
Media: visual

Alles anzeigen

W3C hat recht, denn die machen die Regeln !!!!

Sehe es doch einfach ein !!!

Gruß,

Peter

ps: DISPLAY ist eine CSS 1.0 Funktion ; VERTICAL-ALIGN ist auch eine CSS 1.0 Funktion !!!!

Ronald

Sorry, aber ich will wirklich nicht streiten.

Du schmeist nur einfach alles durcheinander und dann paßt es schon.

Die Frage war: Kann ein Div-Tag Text per CSS vertikal zentriert anzeigen?
Die richtige Antwort lautet immer noch 'nein, das kann es nicht.'

Du machst daraus jedoch die Frage: Kann ein Div-Tag per CSS die Eigenschaften einer Tabellenzelle annehmen?
Diese Antwort lautet: ja, das kann es.

Die dritte Frage wurde nie gestellt, denn die Antwort kennt jeder:
Kann eine Tabellenzelle Text vertikal zentrert anzeigen? (ja).

Kapierst du jetzt, was ich meine?

Vielen Dank für deine Fleißarbeit, aber du liegst leider immer noch neben der Fragestellung.
Außerdem nützt deine Notlösung nichts, wenn es nur Mozilla versteht, leider ist der größere Teil der User immer noch mit dem IE unterwegs.

Gute Nacht

Ronald
... für den das Thema hier beendet ist.

driver

also ich will mich dann mal roland anschließen....

ein div ansich kann nicht vertikal zentriert werden. geht einfach nicht.
und genau das war gefragt...

aber wie ja erwähnt ises zwar über tabel-cell möglich, allerdings nicht valide.

und bevor wir jetzt nocht die schwerte rausholen mach ich det mal zu...