pourquoi n'est-il pas ce bouton css centre à l'intérieur de la div?

Votre bouton doit être un élément de niveau bloc. La plus simple correctif:

a.button-large{  
    padding : 15px 30px 14px 30px;
    margin  : 5px auto;
    display : block;
    width   : 100px;
}

http://jsfiddle.net/jqvbM/

Je voudrais aussi supprimer le 10px marge de droite sur a.button-large i au centre de la "en Savoir Plus" du texte.

OriginalL'auteur AlienWebguy

vérifier violon ici

vous devez modifier votre css comme ci-dessous:
- supprimer margin de a.button-large classe
- et le changement display:table dans .button classe

a.button-large{  
    padding:15px 30px 14px 30px;    
}


.button{
display:table;
position:relative;
font-style:normal; 
font-weight:normal; 
font-family:"Open Sans"; 
font-size:14px;
margin:0 auto;
outline:none;
color:#fff;
border:none;
text-decoration:none;
text-align:center;
cursor:pointer;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}

OriginalL'auteur Sandip

Je suggère de composer un peu en arrière et le divorce vous-même à partir de votre cadre ou ce que vous utilisez. Au centre des choses à l'horizontale il y a 2 approches.

Vous devez décider si vous souhaitez que le bouton à la position: en ligne, inline-block, ou le bloc. Pour les mobiles et les doigts et tout ce genre de choses(2014) - je dirais inline-block ou un bloc. Soi -

si c'est inline block, alors vous pouvez juste le traiter comme du texte. Définir le parent à text-align center;

Si c'est à bloc, puis vous vous pouvez utiliser margin-right: auto; margin-left: auto; mais qui a d'autres questions. Comme tous les autres pense à proximité doivent être organisés de sorte qu'ils ne flottent pas tous les uns les autres et visser le tout. Je vous suggère de faire comme ceci: jsfiddle

PS - nous n'avons pas besoin de voir autant de code dans votre violon. Il est plus facile d'obtenir à la déroute du problème avec seulement le strict nécessaire. Bonne chance.

HTML

<aside class="service">

    <header>
        <h2 class="">Title of module thing</h2>
    </header>

    <div class="text-wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet…</p>
        <a href="#" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
    </div> <!-- .text-wrapper -->

</aside> <!-- .service -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} /* start your projext off right */


.service {
    border: 1px solid #2ecc71;
    font-family: helvetica;
    text-align: center;
}

.service header {
    background-color: #2ecc71;  
}

.service header h2 {
    font-size: 1.3em;
    font-weight: 400;
    color: white;
    /* text-align: center; */ /* the parent should have this - not the element */
    /* width: 100%; */ /* this is already default because it is a block element */
    margin: 0;
    padding: .5em;
}

.service .text-wrapper {
    padding: 1em;
}

.service p {
    text-align: left;
    font-size: .9em;
}

.button {
    display: inline-block; /*so it's like... "inline" - and can be centered */
    background-color: #2ecc71;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    padding: 1em 2em;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

OriginalL'auteur sheriffderek

Essayer cette

<div style="text-align:center;">
    <a href="" class="button button-large"><i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More</a>
</div>

DÉMO

OriginalL'auteur Sridhar R