web-dev-qa-db-fra.com

pourquoi ce centre de bouton css ne se trouve-t-il pas dans div?

Alors ... ça commence à m'agacer ... et je pensais que je viendrais ici et obtenir de l'aide ..

La div principale autour de la boîte a une largeur ... alors il y a du texte ... et un bouton que je veux au centre de la div ..

c'est un bouton <a href> .. mais il ne se centre pas.

Je ne pensais pas avoir besoin de spécifier une largeur car la division extérieure avait une largeur .. j'ai essayé margin:0 auto; text-align:center etc rien ne fonctionne

<h2 class="service-style color_service">Annoyed</h2>
<div class="service-text text1">
    <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>

voici le lien de violon

http://jsfiddle.net/2gMQ9/

htmlcssbuttoncenteringflat
9
op1001

Vous avez le problème à cause du display:inline-block... voir ici

Dans cette section de css, ajoutez:

Supprimez tous les margins dans buttonclass et modifiez comme suit:

/*  --------------------------------------------------
    :: Button Configuration
    -------------------------------------------------- */
 .button {
    display:block; /* change this from inline-block */
    width:20%; /* setting the width */
    margin:0 auto; /* this will center  it */
    position:relative;
    font-style:normal;
    font-weight:normal;
    font-family:"Open Sans";
    font-size:14px;
    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;
    background-color:#96aa39;
    border-bottom:1px solid #7b8b2f;
}

EDIT: utiliser inline-block sans définir de largeur

démo inline-block

Comment faire seule solution pour centrer l'élément inline-block consiste à utiliser text-align:center

dans votre classe de css:

.service-text {
text-align: center; /* add this to center the button */
}

puis ajoutez:

.service-text p{
 text-align:left /* and then add this to left align the text inside the para*/
}

ainsi, vous n'aurez pas besoin de donner width et seulement padding résoudra votre problème!

12
NoobEditor

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

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

http://jsfiddle.net/jqvbM/

Je voudrais également supprimer la marge droite 10px sur a.button-large i pour centrer le texte "En savoir plus".

4
AlienWebguy

Je suggérerais de le rappeler un peu et de divorcer de votre cadre ou de ce que vous utilisez. Pour centrer les choses horizontalement, il y a 2 approches. 

Vous devez décider en fonction de votre choix de positionner le bouton: inline, inline-block ou block. Pour mobile et doigts et tout ce genre de choses (2014) - je suggérerais un blocage en ligne ou un blocage. Alors - 

s'il s'agit d'un bloc en ligne, vous pouvez simplement le traiter comme du texte. Définissez le parent sur text-align center;

Si c'est bloqué, vous pouvez utiliser margin-right: auto; margin-left: auto; mais cela pose d'autres problèmes. Comme tous les autres pensent, il doit être organisé de manière à ne pas flotter les uns sur les autres et à tout gâcher. Je vous suggère de le faire comme ceci: jsfiddle

PS - nous n'avons pas besoin de voir autant de code dans votre violon. Il est plus facile d'arriver à 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;
}
1
sheriffderek

Vous devez mettre le texte-align: center; l'élément parent du bouton dans votre cas est le div.service-text.

si vous voulez que le top P soit text-align: right; veuillez utiliser P différent pour le bouton

rappelles toi. si votre élément est display: block; vous devez donc donner une marge: 0 auto; à votre élément. si votre élément est display: inline-block; vous devez donner text-align: center; à l'élément parent.

1
g.e.manor

vérifier le violon ici

vous devez modifier votre css comme ci-dessous: - supprimer margin de a.button-large classe - et changer 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;
}
1
Sandip

La solution rapide consiste à ajouter "text-align: center;" à .service-text.

1
Jimmy.Peng

Essaye ça

<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>

DEMO

0
Sridhar R

Essayez d'inclure votre bouton dans un div et mettez à jour CSS comme indiqué ci-dessous

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

`CSS`
.check
{
    width: 150px;
    margin:auto;

}
0
Kishori

Enveloppez le bouton dans un élément et donnez-lui text-align:center.

Écrire:

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

.center {
    text-align:center;
}

Mise à jour du violon ici.

0
Hiral