[XHTML en CSS] Input buttons centreren in div

[Urk]

Ik heb een probleem dat ik binnen een div een viertal buttons wil centreren. Ik krijg het alleen niet voor elkaar, ik weet dat je text kan centreren (met text-align: center;), maar kan ik ook een aantal buttons centreren?
Het is de bedoeling dat de 4 buttons 20px van elkaar afstaan en dat ze totaal worden gecentreerd.
Om de een of andere reden wordt er boven de buttons ook ruimte lege gebruikt.

Het moet trouwens identiek eruit zien in IE, Opera en Firefox.

Cascading Stylesheet:

[...]
.nodatarow {text-align: center;}
.button {
 font-family: Verdana, Tahoma, "Lucida Sans Unicode", Arial;
 font-size: 11px;
 width: 100px;
 height: 18px;
 line-height: 13px;
 padding-bottom: 2px;
 margin-top: 15px;
 background-color: #396E32;
 color: #FFFFFF;
 cursor: pointer;
}
[...]

HTML:

<div class="nodatarow" style="height: 45px; padding-bottom: 15px;">
 <div style="float: left; margin-right: 10px;">
  <input type="button" value="eerste pagina" style="width: 120px;" class="button" disabled="disabled" />
 </div>
 <div style="float: left; margin-right: 10px;">
  <input type="button" value="vorige pagina" style="width: 120px;" class="button" disabled="disabled" />
 </div>
 <div style="float: left; margin-right: 10px;">
  <input type="button" value="volgende pagina" style="width: 120px;" class="button" />
 </div>
 <div style="float: left; margin-right: 10px;">
  <input type="button" value="laatste pagina" style="width: 120px;" class="button" />
 </div>
</div>

[Zoefff]

Waarom zet je in godsnaam die buttons in aparte div-jes? En waarom gebruik je naast een centrale CSS ook nog inline CSS?

Het zijn gewoon inline-elementen, dus je hoeft niets te floaten o.i.d. Die lege ruimte komt vast door 1 van de margins die je toegevoegd hebt.

Probeer je code eens wat netter te houden, dan kan je dit soort problemen ook makkelijker tackelen:

HTML:

<div id="buttons">
    <input type="button" value="eerste pagina" disabled="disabled" />
    <input type="button" value="vorige pagina" disabled="disabled" />
    <input type="button" value="volgende pagina" />
    <input type="button" value="laatste pagina" />
</div>

Cascading Stylesheet:

#buttons {
    text-align:center;
}
#buttons input {
    width:120px;
    margin:0px 10px 0px 10px;
    font-family: Verdana, Tahoma, "Lucida Sans Unicode", Arial; 
    font-size: 11px; 
    background-color: #396E32;
    color: #FFFFFF; 
}

Doet volgens mij precies wat jij wilt. Voorbeeldje op http://zoefff.area61server.nl/got/buttons.html

[ Voor 8% gewijzigd door Zoefff op 02-02-2006 17:25 ]

[ZeilDude]

De oorzaak zit 'm inderdaad in de floats. Die heb je waarschijnlijk toegevoegd om de divs min of meer inline te laten staan in z'n wrapper.
Maar doe wat hier boven staat: skip de code die niks toevoegt en KISS.

[Anoniem: 9542]

@zoefff: en dan ook nog die div weg en fieldset en p erin

en legend btw

[Urk]

Zoefff schreef op donderdag 02 februari 2006 @ 17:23:


Waarom zet je in godsnaam die buttons in aparte div-jes? En waarom gebruik je naast een centrale CSS ook nog inline CSS?

Het zijn gewoon inline-elementen, dus je hoeft niets te floaten o.i.d. Die lege ruimte komt vast door 1 van de margins die je toegevoegd hebt.

Probeer je code eens wat netter te houden, dan kan je dit soort problemen ook makkelijker tackelen:
[...]
Doet volgens mij precies wat jij wilt. Voorbeeldje op http://zoefff.area61server.nl/got/buttons.html

Bedankt voor je voorbeeld, ik ga het inbouwen en kijken of het lukt.

Om even op je reactie te reageren:
Ik had de buttons eerst ook zonder div om iedere button, alleen dat kreeg ik niet werkend, dus wel geprobeerd maar ging niet goed.

Ik gebruik idd nu even in dit voorbeeld een centrale CSS en inline CSS, maar als het werkt plaats ik alles in de centrale CSS natuurlijk!

[Urk]

Stom stom, ik weet waarom het niet werkte.
Er stond nog ergens in de CSS --> input {display: block; float: left;}

Dat is natuurlijk dom!
Bedankt voor jullie hulp, probleem is opgelost en werkt nu bijna prima!

[Zoefff]

Anoniem: 9542 schreef op donderdag 02 februari 2006 @ 17:55:
@zoefff: en dan ook nog die div weg en fieldset en p erin

en legend btw

True, maar dat is allemaal omliggende code. Ik weet verder niet hoe en waar die buttons terecht komen

[Urk]

Anoniem: 9542 schreef op donderdag 02 februari 2006 @ 17:55:
@zoefff: en dan ook nog die div weg en fieldset en p erin

en legend btw

Ik kan het niet helemaal volgen, wat bedoel je hiermee?

[Anoniem: 9542]

dat er meer beschrijvende elementen zijn dan al die div's. legend is in het geval van button type inputs een beetje loos (had ik even overheen gelezen), maar bij normale inputs wel erg nuttig. En verder is het echt geen overbodige luxe je formulieren op te maken met fieldset en p elementen.