ich hänge an einer, hoffentlich, simplen Stelle.
Ich will jediglich zwei nebeneinander stehende divs, welche einen Link enthalten, mittig im übergeordneten div ausrichten.
margin:0 auto und text-align:center brachte bei mir keinen Erfolg. Hat jemand eine Idee?
Wenn du für .button display: inline-block angibst, könnte es auch
mit text-align:center in .buttons klappen, bei Blockelementen
wie div oder bei expliziter Angabe von display: block sicher nicht.
Man beachte allerdings, daß es den Wert erst seit CSS2.1 gibt,
also bei älteren browser-Versionen wohl nicht funktionieren wird.
Wenn du die Breite des Inhalts von .buttons kennst und dann
auch angibst, kann es dort mit einem
margin-left: auto; margin-right: auto klappen. Ohne Breitenangabe
klappt das natürlich auch, da das Element die volle Breite hat,
ist es immer zentriert, nur nicht der Inhalt - was du ja
vermutlich möchtest.
Erster Vorschlag sorgt dafür, daß die Elemente ähnlich wie
img-Elemente behandelt werden, die inzeilige Elemente sind,
aber auch Höhe und Breite haben können.
Beim zweiten Vorschlag nutzt du dein Wissen aus, um die Breite
des Elternelements passend zu verkleinern und dann dies mit
symmetrischem margin zu zentrieren.
Danke hoffmann. Ich habe eben mit deinen Vorschlägen experimentiert.
Ergebnis:
display:inline-blocck mit text-align:center hat keine Auswirkung
margin-left:auto und margin-right:auto hat ebenfalls keine Auswirkung
Du sagst, ich soll es ähnlich wie ein img-Element behandeln. Was meinst du damit? Wie würde das in meinem Fall aussehen?
Danke.
Gruß Elsner
PS: Natürlich könnte ich es durch ein margin:left passend hinschieben. Aber ich möchte es, wenn möglich, dynamisch machen, da sich die Größe und Anzahl der Buttons ändern kann und dann würde margin ja nicht mehr passen.
nun ja, schlimmstenfalls könnte man ja auch eine Tabelle mit zwei Zellen dafür nutzen… (und das von mir ).
„display:table“ kommt auch in Frage.
-> de.selfhtml.org/css/eigenschafte … tm#display
Nachdem ich das float in .button entsorgt hatte, funktionierte
es mit text-align:center und display: inline-block gut
(Ausprobiert mit Opera 9.6x, Gecko1.9 (Iceweasel 3.x))
Beim margin: auto macht das float vom .menue Probleme,
weil das margin von .buttons dann vom .menue genutzt wird.
Funktionieren tut das auch, daß .buttons zentriert ist -
unberücksichtigt bleibt dabei allerdings das .menue, welches
wegen float:left einfach auf dem margin von .buttons liegt.
Könnte man einfacher/besser machen, wenn man statt float
einfach eine absolute Positionierung für .menue wählt und
dafür dem body einen entsprechenden margin gibt. Gibt da sicher
noch andere Möglichkeiten, etwa bei .inhalt nicht margin: auto
setzen, sondern margin-left: 170px oder sowas, wobei es wohl
ohnehin suboptimal ist, bei .menue width: 160px statt etwa
13em anzusetzen, ebenso die anderen Breiten in px für Elemente,
die Text enthalten.