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 %MINIFYHTMLa73dc956f3ae95bd219e9405af66041a13%
teeeeest%MINIFYHTMLa73dc956f3ae95bd219e9405af66041a5%
So würde es dann aussehen:
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 %MINIFYHTMLa73dc956f3ae95bd219e9405af66041a14%
teeeeest
So würde das aussehen:
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.