Zentrum <a> Tag in div

Question

HTML

<a href="#" class="button blue">Apply Now</a> 

CSS

.button { 
    padding:1em; 
    text-align: center; 
    display:inline-block; 
    text-decoration: none !important; 
    margin:0 auto; 

    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

Hallo,

Zeit ein Problem mit meiner Schaltfläche mit. Ich möchte mein "a" -Tag zentrieren können, aber im Moment wird es nur auf der linken Seite bleiben. Ich habe versucht, mit "display: block", aber dies wird meinen Knopf nehmen die volle Breite von jedem div es ist eingefügt worden.

Vielen Dank im Voraus.

Answer 1

ein Div über den Link

.button { 
 
    padding:1em; 
 
    text-align: center; 
 
    display:inline-block; 
 
    text-decoration: none !important; 
 
    margin:0 auto; 
 

 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -ms-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 

 
.container{ 
 
    width: 100%; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <a href="#" class="button blue">Apply Now</a> 
 
</div>

Answer 2

Verwenden der text-align zum Zentrum: Zentrum; auf einem übergeordneten Element, um alle untergeordneten Elemente in der Mitte auszurichten. Sie (untergeordnete Elemente) müssen keine Elemente auf Blockebene für dasselbe sein. Ihre Frage hat die Befürchtung, dass Sie nicht den gesamten Speicherplatz des übergeordneten divs belegen möchten, indem Sie display: block auf Ihrem a-Tag verwenden.

Sie haben nicht auf, auch wenn Sie Anzeige angeben: inline-block auf Ihrem einen Tag und wickeln Sie es in einem Elternteil mit text-align: center;, wird es Ihre Aufgabe lösen.

Alternativ können Sie margin-left verwenden: 25% oder so, falls die obige Antwort nicht Ihren Anforderungen entspricht.

Fühlen Sie sich frei, den Code einzuwerfen, falls Sie weitere Hilfe benötigen.

Danke,
Yaman