CSS Ausrichten von Boxen in einer Box

[menzm]

Hallo zusammen,

ich hab gestern mal ein bisschen mit CSS gespielt. Jetzt bin ich auf ein Problem gestossen, das ich nicht mehr lösen konnte. Vielleicht könnt ihr mir weiterhelfen.
Ich habe eine Box die in der Breit den Schirm zu 100% füllen soll. In diese Box kommen weiter Boxen die aus Buttons bestehen. Jetzt habe ich das Problem, dass die Boxen in der Box, also die Buttons, immer links ausgerichtet werden. Hier mal der Code:

.buttons
{
width:100%;
height:50px;
border: 1px solid black;
margin-top:25px;
min-width: 550px;
}

.button_yellow
{
width: 125px;
height: 50px;
background-image: url('button_jellow.png');
background-repeat: no-repeat;
float: left;
padding-bottom: 5px;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
}

Ich hab schon margin-left, right mit auto versucht, das hat aber leider nicht funktioniert. Die Buttons bleiben immer Linksbündig.

Vielen Dank

Gruß
Manuel

 

[MP_H1tm4n]

Um die zu dritt zu zentrieren würde ich einen weiteren div drumrum setzen.
diesem dann einfach die Eigenschaft
margin: 0 auto;
geben. Der erste wert heißt 0 margin oben und unten, der zweite auto margin links und rechts. Das kann man zum zentrieren von Elementen verwenden.

//ADD:
Wie sollen sie überhaupt genau positioniert sein?
wenn untereinander, könnte auch

clear: left;
float: left;
margin-left u. right: auto;

funktionieren. Damit fängt er in jeder zeile neu an, zu floaten und akzeptiert die auto-margins vielleicht. kann es gerad nt testen, sry

 

[menzm]

@MP_H1tm4n
Du hast schon richtig verstanden, das ganze soll zentriert sein :-).

Okay, du meinst, ich soll um die buttons und button_yellow noch mal ein div mit den angegeben werten machen?

Leider kann ich das erst am Montag versuchen. Ich melde mich wieder.

Vielen Dank

Gruß
Manuel

 

[blond]

http://cdpn.io/wgFmb

 

[menzm]

Also, die Buttons sind jetzt mittig ausgerichtet. Allerdings funktioniert jetzt des zentrieren des Textes in der Buttonbox nicht mehr. Das Problem scheint aber nur mit der webkit-box zu bestehen. Im Firefox ist der Text vertikal und horizontal mittig. Bei z.B. Chrome ist der Text nur vertikal zentriert. Horizontal ist er oben ausgerichtet. Habt ihr hier eventuell noch einen Tip?

.buttons
{
width:100%;
height:50px;
#border: 1px solid black;
margin-top:25px;
min-width: 550px;
text-align: center;
position: relative
}

.button_yellow
{
width: 125px;
height: 50px;
background-image: url('button_yellow.png');
background-repeat: no-repeat;
padding-bottom: 5px;
display: inline-block;
display:-webkit-box-flex;
#-webkit-box-pack:center;
#-webkit-box-align:center;
-webkit-flex-align: center;
-webkit-flex-pack: center;
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
}

Ergänzung (16. Juli 2013)

Mit IE9 funktioniert es leider auch nicht mehr. Im Moment wird nur noch im Firefox der Text zentriert ausgerichtet.

 

[MP_H1tm4n]

display:-webkit-box-flex;
#-webkit-box-pack:center;
#-webkit-box-align:center;
-webkit-flex-align: center;
-webkit-flex-pack: center;
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

Also dieses ganze Zeug würde ich an deiner Stelle nicht verwenden. Das sind spezielle Browser-spezifische Angaben, auf die du aus Kompatibilitätsgründen erstmal verzichten solltest, erst recht wenn du gerade "etwas mit CSS rumspielst".

Beschränke dich auf Padding (manuelle vertikale Zentrierung und Einrückung), Text-align: center (ist klar) und Margin auto (um boxen zu zentrieren).

Für Details brauchen wir auch dein HTML Markup