Style de bouton CSS

Je suis encore nouveau en CSS, désolé pour le long post. J'ai le code suivantStyle de bouton CSS

<style type="text/css"> 

.btn { 
    float: left; 
    clear: both; 
    background: url(images/btn_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    margin: 5px 0; 
} 
.btn a{ 
    float: left; 
    height: 40px; 
    background: url(images/btn_stretch.png) repeat-x left top; 
    line-height: 40px; 
    padding: 0 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(images/btn_right.png) no-repeat; 
    float: left; 
    width: 10px; 
    height: 40px; 

} 
.btn_addtocart { background-color: green; } 
.btn_checkout { background-color: red; } 

</style> 
</head> 

<body> 

<div class="btn btn_addtocart"><a href="#">Add to Cart</a><span></span></div> 

<div class="btn btn_checkout"><a href="#">Check Out</a><span></span></div> 

</body> 
</html>

J'essaie de centrer chaque bouton au milieu de la page (alignement horizontal), comment puis-je accomplir cela? J'ai essayé de jouer avec le rembourrage et la marge mais ça gâche mon image de fond.

est ici jsFiddle

Source

2011-09-22 raym0nd

essayer marge automatique, centre text-align, largeur fixe pour une partie du milieu .. oh ..et se débarrasser du flotteur, et ne pas oublier la ';'

modifier code ..

.btn { 
    clear: both; 
    background: url(images/btn_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    display: block; 
    margin: 5px auto; 
    text-align: center; 
    width: 120px; 
} 
.btn a { 
    height: 40px; 
    background: url(images/btn_stretch.png) repeat-x left top; 
    line-height: 40px; 
    padding: 0 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(images/btn_right.png) no-repeat; 
    width: 10px; 
    height: 40px; 
} 
.btn_addtocart { background-color: green; } 
.btn_checkout { background-color: red; }

Source

2011-09-22 20:21:24

semble parfait sans les images mais quand j'ajoute les images il se fout, merci, m'a aidé à obtenir la bonne réponse. – raym0nd

Un couple de choses que vous pouvez faire

.btn { 
    display: block 
    margin-left: auto; 
    margin-right: auto; 
}

Par défaut, un bouton est un élément en ligne, de sorte que les marges ne fonctionnera. L'écran de réglage pour bloquer, il sera agir comme un

div.btnParent { 
    text-align:center 
}

L'autre méthode est d'avoir contenant le centre texte d'alignement de l'élément du bouton. Le peut ne pas toujours fonctionner, car il peut y avoir plus de contenu dans ce conteneur que vous ne voulez pas être centré.

Source

2011-09-22 19:37:28

J'ai essayé le réglage de la marge à l'auto, mais cela n'a pas fonctionné. – raym0nd

"Par défaut, un bouton est un élément en ligne" - bien, un bouton est généralement une étiquette INPUT de formulaire. Mais dans l'exemple ci-dessus, il s'agit d'une balise d'ancrage, qui, oui, est par défaut en ligne. –

Je ne peux pas voir complètement à partir de votre extrait de code, mais pour centrer quelque chose au milieu de son parent, vous devez définir sa marge à auto.

margin: auto

et sa largeur

width: 100px:

EDIT: également supprimer tous les styles que vous avez float: sur l'élément.

Source

2011-09-22 19:38:26

J'ai essayé de régler la marge à l'auto mais cela n'a pas fonctionné. – raym0nd

Voir modifier, supprimer le flotteur: gauche –

Vous pouvez text-align:center les liens à l'intérieur des divs (qui sont des éléments de niveau bloc) pour les centrer à l'intérieur de leurs conteneurs, mais vous devrez faire quelques réglages. Essayez ceci:

.btn { 
    clear: both; 
    background: url(images/btn_left.png) no-repeat; 
    padding: 0 0 0 10px; 
    margin: 5px 0; 
    text-align:center; 
} 
.btn a { 
    height: 40px; 
    background: url(images/btn_stretch.png) repeat-x left top; 
    line-height: 40px; 
    padding: 10px; 
    color: #fff; 
    font-size: 1em; 
    text-decoration: none; 
} 
.btn span { 
    background: url(images/btn_right.png) no-repeat; 
    float: left; 
    width: 10px; 
    height: 40px; 
    display: block; 

} 
.btn_addtocart a { background-color: green; } 
.btn_checkout a { background-color: red; }

Démo http://jsfiddle.net/andresilich/UtXYY/1/

Source

2011-09-22 20:19:44

semble parfait sans les images, mais quand j'ajoute les images il se foiré, merci cependant, m'a aidé à obtenir la bonne réponse. – raym0nd

Parfait! N'oubliez pas de poster la bonne réponse à votre question, il s'agit d'un forum communautaire où les gens viennent chercher de l'aide, votre solution pourrait aider quelqu'un d'autre. À votre santé! –

Style de bouton CSS

Répondre

Questions connexes