CSS: DIV Block zentrieren/links/rechts

Letztens kam die Frage, wie man ein DIV Element zentrieren kann. Das ist eigentlich total simpel. Im Internet gibts sicher viele Lösungen, ich stelle hier kurz ein Codebeispiel vor:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  
    
    Div zentrieren%MINIFYHTML45b418e54199f485b44646ef2f850be015%
  
    
teeeeest
%MINIFYHTML45b418e54199f485b44646ef2f850be06%

So würde es dann aussehen:
div-zentriert
border, padding und text-align dienen nur der Veranschaulichung. Wichtig ist eigentlich nur, dass das DIV eine Breite und „margin: auto;“ bekommt. Manchmal muss man mit „display: block;“ noch etwas nachhelfen. Wie ihr an meiner Testseite (und im Screenshot) sehen könnt funktioniert es 🙂

Wie kann man das DIV jetzt rechts- oder linksbündig darstellen?
Auch das ist recht simpel, hier ist erstmal der Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  
    
    Div rechtsbündig%MINIFYHTML45b418e54199f485b44646ef2f850be016%
  
    
teeeeest

So würde das aussehen:
div-rechts

Die einzige Änderung ist, dass statt „margin: auto;“ „margin-left: 50%“ eingesetzt wurde. Nach dem Schema: „margin-[entgegengesetzte Richtung]: [Breite des DIV]“.
Hier ist noch die Test-HTML und nach dem Schema könnt ihr natürlich auch linksbündig darstellen.

Schreibe einen Kommentar