wake-up-neo.com

warum zentriert sich dieser CSS-Button nicht innerhalb von div?

Also ... das nervt mich langsam ... und ich dachte, ich würde hierher kommen und Hilfe bekommen.

Das Haupt-Div um die Box hat eine Breite ... dann gibt es Text ... und einen Button, den ich in der Mitte des Divs haben möchte.

es ist eine <a href> Taste .. aber es wird nicht zentriert.

Ich hätte nicht gedacht, dass ich eine Breite angeben müsste, da das äußere div eine Breite hat. Ich habe versucht, margin:0 auto; text-align:center usw. nichts funktioniert

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

hier ist der Geigenlink

http://jsfiddle.net/2gMQ9/

9
op1001

Sie haben das Problem wegen display:inline-block... siehe hier

Fügen Sie in diesem Abschnitt von css Folgendes hinzu:

Entfernen Sie alle margin-Sets unter buttonclass und ändern Sie sie wie folgt:

/*  --------------------------------------------------
    :: 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: Inline-Block verwenden, ohne eine Breite festzulegen

Inline-Block-Demo

How to do Die einzige Lösung zum Zentrieren des Inline-Block-Elements ist text-align:center.

in deiner CSS-Klasse:

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

und dann hinzufügen:

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

auf diese Weise müssen Sie nicht width angeben, und nur padding würde Ihr Problem lösen!

12
NoobEditor

Ihre Schaltfläche muss ein Block-Level-Element sein. Einfachste Lösung: 

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

http://jsfiddle.net/jqvbM/

Ich würde auch den 10px rechten Rand von a.button-large i löschen, um den Text "Weitere Informationen" zu zentrieren.

4
AlienWebguy

Ich würde vorschlagen, es ein wenig zurückzurufen und sich von Ihrem Rahmen oder was auch immer Sie verwenden, zu trennen. Um die Dinge horizontal zu zentrieren, gibt es zwei Ansätze. 

Sie müssen entscheiden, ob Sie die Schaltfläche positionieren möchten: Inline, Inline-Block oder Block. Für Handy und Finger und all das Zeug (2014) - ich würde Inline-Block oder Block vorschlagen. So - 

wenn es sich um einen Inline-Block handelt, können Sie ihn wie Text behandeln. Legen Sie das übergeordnete Element auf text-align center; fest.

Wenn es blockiert ist, können Sie margin-right: auto; margin-left: auto; verwenden, aber das hat andere Probleme. Wie alle anderen Menschen in der Nähe müssen sie ordentlich organisiert werden, damit sie nicht übereinander schweben und alles vermasseln. Ich würde vorschlagen, dass Sie es so machen: jsfiddle

PS - wir brauchen nicht so viel Code in Ihrer Geige zu sehen. Es ist einfacher, mit nur dem Nötigsten an die Lösung des Problems zu gelangen. Viel Glück.

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

Sie müssen den Text ausrichten: zentrieren; In Ihrem Fall ist das übergeordnete Element der Schaltfläche der div.service-Text.

wenn Sie möchten, dass das obere P auf Text ausgerichtet wird: rechts; Bitte verwenden Sie ein anderes P für den Button

merken. Wenn Ihr Element angezeigt wird: Block; Sie müssen also eine Marge angeben: 0 auto; zu deinem Element. Wenn Ihr Element angezeigt wird: Inline-Block; Sie müssen den Text ausrichten: zentrieren; zum übergeordneten Element.

1
g.e.manor

Geige hier überprüfen

sie müssen Ihre CSS wie folgt ändern: - entfernen Sie margin aus der a.button-large-Klasse - und ändern Sie display:table in der .button-Klasse

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

Ein schneller Weg ist, "text-align: center;" zu .service-text hinzuzufügen.

1
Jimmy.Peng

Versuche dies

<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

Versuchen Sie, Ihren Button in ein div aufzunehmen und CSS wie unten angegeben zu aktualisieren

<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

Wickeln Sie die Schaltfläche in ein Element und geben Sie text-align:center.

Schreiben:

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

Geige hier aktualisiert.

0
Hiral