Centrering af knap

hvordan centrere du den?
i din css
a.button {
...
    float: left;
...
}
prøv float:center;

margin-left: auto;
margin-right: auto;

på din knap :)

@ eXcluzive:
Har prøvet at skifte "float: left;" ud med "float: center;", men så flyder de to dele af knappen ud til hver sin side...  :os

@ 88mouv-net:
Hvor sætter jeg det ind? Jeg har alt det her...:

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
a.button span {
    background: transparent url('images/bg_button_span2.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    overflow: hidden;
}
a.button {
    background: transparent url('images/bg_button_a2.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

<ole>

Nej, ingen af delene. En knap er et inline element, som centreres med text-align:center på det omkransende element  ;o)

Et enkelt element mere, og det kører:
   
<div style="text-align:center>"
<a class="button" href="#" onclick="this.blur();"><span>Læs mere...</span></a></div>

/mvh
</bole>

Har prøvet at sætte det ind her, men det gør ingen forskel...:

a.button {
    background: transparent url('images/bg_button_a2.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
margin-left: auto;
margin-right: auto;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

- eller:
    <a class="button" style="display:block;margin:0 auto" href="#" onclick="this.blur();"><span>Læs mere...</span></a></

@ olebole:
Så forsvinder knappen...? Teksten står der stadig, men selve grafikken er væk...?  :os

@ olebole:
Div-tagget får knappen til at forsvinde (men efterlader teksten).

Det sidste a class gør ingen synlig forskel...?  :os

Fjern float, giv anchoret, display: block;margin:0 auto;width XXXpx;

/J

a.button span {
    background: transparent url('images/bg_button_span2.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    overflow: hidden;
}
a.button {
    background: transparent url('images/bg_button_a2.gif') no-repeat scroll top right;
    color: #444;
    display: block;
width: 75px;
    font: normal 12px arial, sans-serif;
    height: 24px;
margin: 0 auto;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

@ olebole:
Ah...! Div-tagget fik grafikken til at forsvinde, fordi der var byttet om på " og > til sidst...
Men når jeg stiller dem rigtigt, er knappen stadig i venstre side...

width, på spannet :)

@jokkejensen:
Jæææii! Det virker!!  :oD

Og tak fordi du sætter det op, så jeg bare kan copy-paste...  ;o)

Hmm... Det betyder at jeg nu har defineret bredden på knappen - og det var jo lidt smart at den selv kunne styre det alt efter tekstens længde.

(Hvis jeg sætter den til "width: auto;", så deler knappen sig igen... Men det virker med 100 px i bredden...)

Men det kan ikke kombineres, eller hvad? Så knappen er centreret, og stadig selv bestemmer bredden?

Nå, det får lov at være sådan...  :o)

Jokkejensen - lægger du et svar, så jeg kan give dig point og lukke tråden?

Tak for hjælpen alle sammen!  :oD


:o)  Rie

Dooohhhhh ... width, selvfølgelig! Sorry  ;o)