Text auf der Oberseite nicht in die Schaltfläche Zentrieren

Question

I Taste oben

mit Text haben

Hier Code

.settings-button-new { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-decoration: none; 
 
    line-height: 14px; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    border: solid 4px #d3dbde; 
 
    -webkit-border-radius: 13px; 
 
    -moz-border-radius: 13px; 
 
    border-radius: 13px; 
 
    font: 15px Arial, Helvetica, sans-serif; 
 
    color: #1c559b; 
 
    background-color: #ffffff; 
 
    background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0); 
 
    background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%); 
 
    -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
} 
 

 
.settings-button-new span { 
 
    display: block; 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
}

<button class="settings-button-new"><span>Home</span></button>

Es ist auf der Spitze, aber nicht, wie Sie können zentriert sehen.

Ich versuche text-align: center; zu verwenden, aber es scheint nicht funktioniert.

Wie kann ich es in Button zentrieren?

Dankten Hilfe

Answer 1

Fügen Sie einfach unten CSS-Code für Zentrum, wenn nicht Zentrum vertikal müssen dann die top:0 or as your need; und transform: translate(-50%, 0);.

.settings-button-new span { 
     display: block; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
    } 

.settings-button-new { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-decoration: none; 
 
    line-height: 14px; 
 
    position: relative; 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    border: solid 4px #d3dbde; 
 
    -webkit-border-radius: 13px; 
 
    -moz-border-radius: 13px; 
 
    border-radius: 13px; 
 
    font: 15px Arial, Helvetica, sans-serif; 
 
    color: #1c559b; 
 
    background-color: #ffffff; 
 
    background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#fcfcfc', GradientType=0); 
 
    background-image: linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
} 
 

 
.settings-button-new span { 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<button class="settings-button-new"><span>Home</span></button>

Nur Zentrum.

.settings-button-new span { 
      display: block; 
      position: absolute; 
      top: 5px; 
      left: 50%; 
      transform: translate(-50%, 0); 
     } 

.settings-button-new { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-decoration: none; 
 
    line-height: 14px; 
 
    position: relative; 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    border: solid 4px #d3dbde; 
 
    -webkit-border-radius: 13px; 
 
    -moz-border-radius: 13px; 
 
    border-radius: 13px; 
 
    font: 15px Arial, Helvetica, sans-serif; 
 
    color: #1c559b; 
 
    background-color: #ffffff; 
 
    background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#fcfcfc', GradientType=0); 
 
    background-image: linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
} 
 

 
.settings-button-new span { 
 
    display: block; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
}

<button class="settings-button-new"><span>Home</span></button>

Answer 2

.settings-button-new span { 
margin: 0px; 
text-align: center; 

}

Answer 3

Vielleicht kann dieser Code helfen Ihnen

.settings-button-new { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-decoration: none; 
 
    line-height: 14px; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    border: solid 4px #d3dbde; 
 
    -webkit-border-radius: 13px; 
 
    -moz-border-radius: 13px; 
 
    border-radius: 13px; 
 
    font: 15px Arial, Helvetica, sans-serif; 
 
    color: #1c559b; 
 
    background-color: #ffffff; 
 
    background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0); 
 
    background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%); 
 
    -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
} 
 

 
.settings-button-new span { 
 
    display: block; 
 
    position: absolute; 
 
    top:0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<button class="settings-button-new"><span>Home</span></button>

Answer 4

können Sie Spanne ändern div, text-align: center wird dann

Answer 5

gut funktionieren können Sie vertikale Ausrichtung Text entfernen, ohne die absolute Positionierung verwenden: Sie vertical-align und Pseudoelement für diese verwenden können. Source answer for this technique.

Auch

• Sie brauchen keine absolute Position in diesem Fall (und text-align: center).
• Ich würde Ihnen empfehlen Verkäufer Präfix Eigenschaften zu löschen, weil sie für sehr alte Browser sind
• linear-gradient für background arbeiten, nicht background-image Eigenschaft

Demo:

/* styles to align button's text at the top */ 
 
.settings-button-new:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: inherit; 
 
} 
 

 
/* styles to align button's text at the top */ 
 
.settings-button-new span { 
 
    vertical-align: top; 
 
    display: inline-block; 
 
} 
 

 
/* Cleaned up button styles */ 
 
.settings-button-new { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-decoration: none; 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    border: solid 4px #d3dbde; 
 
    border-radius: 13px; 
 
    font: 15px Arial, Helvetica, sans-serif; 
 
    color: #1c559b; 
 
    background: #fff linear-gradient(top, #fff 0%, #fcfcfc 100%); 
 
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #fff; 
 
}

<button class="settings-button-new"> 
 
    <span>Home</span> 
 
</button>

Answer 6

entfernen Sie die poistion.und fügen Sie einfach margin:auto

.settings-button-new { 
 
    width: 150px; 
 
    height: 150px; 
 
    text-decoration: none; 
 
    line-height: 14px; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    border: solid 4px #d3dbde; 
 
    -webkit-border-radius: 13px; 
 
    -moz-border-radius: 13px; 
 
    border-radius: 13px; 
 
    font: 15px Arial, Helvetica, sans-serif; 
 
    color: #1c559b; 
 
    background-color: #ffffff; 
 
    background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%); 
 
    background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0); 
 
    background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%); 
 
    -webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
 
} 
 

 
.settings-button-new span { 
 
    margin:auto; 
 
}

<button class="settings-button-new"><span>Home</span></button>