Div mit Link mittig ausrichten

Guten Abend,

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?

Gruß Elsner

http://elsner.bplaced.net/test/galerie.html

css:

[code]* {padding:0;
}

body {background:url(hintergrund.jpg);
margin:10px 0;
}

.alles {background:url(hintergrund_alles.jpg) repeat-y;
margin:0 auto;
width:1000px;
border:10px solid #333333;
}

.inhalt {width:800px;
text-align:justify;
padding:10px 10px 10px 20px;
border-top:2px solid #333333;
background:url(kamera.bmp) no-repeat;
background-position:right top;
position:relative;
margin-left:auto;
margin-right:auto;
}
.unten-rechts {background:url(kamera.bmp) no-repeat;
background-position:left bottom;
width:800px;
}

.clearer {clear:both;
}

a {color:#000000;
}
a:hover {background:#000000;
color:#ffffff;
text-decoration:none;
}

.buttons {text-align:center;
}
.button {width:272px;
float:left;
line-height:60px;
border:1px solid #ffffff;
margin:25px;
font-size:170%;
font-weight:bold;
}
.button a {background-color:#333333;
color:#ffffff;
display:block;
padding:10px;
width:248px;
text-decoration:none;
border:2px solid #ffffff;
}
.button a:hover {background:#ffffff;
color:#333333;
border:1px solid #333333;
}[/code]

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.

Und du hast text-align auch für ein Vorfahrenelement der beiden Divs angewandt, da es ja nur da sinnvoll ist bei dem Vorhaben …?

Danke chrisb. Leider hat es damit auch nicht funktioniert.

Ich verstehe einfach nicht, warum es sich nicht zentrieren lässt. Hängt es am div, am Link selbst…? Ich weiß es nicht und komme auch nicht dahinter.

Wenn es so nicht funktionieren sollte, hat vielleicht jemand einen anderen Vorschlag für den Aufbau der Buttons?

Danke.

nun ja, schlimmstenfalls könnte man ja auch eine Tabelle mit zwei Zellen dafür nutzen… (und das von mir :ps: ).
„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.