versuchen, HTML-Schaltfläche in der Mitte der meine Seite ausrichten

Question

Im Versuch, eine HTML-Schaltfläche genau in der Mitte der Seite auszurichten, unabhängig vom verwendeten Browser. Es schwebt entweder nach links, während es immer noch in der vertikalen Mitte ist oder irgendwo auf der Seite ist, wie oben auf der Seite usw. Ich möchte, dass es sowohl vertikal als auch horizontal zentriert ist. Hier ist, was ich habe gerade jetzt geschrieben:

<button type="button" 
style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> 
mybuttonname</button> 

Answer 1

Hier ist Ihre Lösung: http://jsfiddle.net/7Laf8/

Grundsätzlich legen Sie Ihre Schaltfläche in ein div mit zentrierten Text:

<div class="wrapper"> 
    <button class="button">Button</button> 
</div> 

Mit den folgenden Arten:

Es gibt viele Möglichkeiten, eine Katze zu häuten, und dies ist nur auf e.

Answer 2

Platz es in einem anderen div, CSS verwenden Sie die Taste, um die Mitte zu bewegen:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;"> 
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> 
mybuttonname</button> 
</div>​ 

Hier ist ein Beispiel: http://jsfiddle.net/U2B3x/

Answer 3

versuchen, dies es ist ganz einfach und geben Sie Änderungen vornehmen können nicht zu Ihre CSS-Datei sollte diese

<p align="center"> 
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button> 
</p> 

Answer 4

arbeiten habe ich wirklich vor kurzem display: table genommen Dinge eine feste Größe zu geben, wiezu ermöglichenzu arbeiten. Hat mein Leben viel einfacher gemacht. Sie müssen nur über die Tatsache hinaus, dass "Tisch" -Anzeige nicht Tabelle HTML bedeutet.

Es ist besonders nützlich für reaktionsfähiges Design, wo die Dinge nur haarig und verrückt werden 50% dieses und -50%, die einfach unüberschaubar werden.

style 
{ 
    display: table; 
    margin: 0 auto 
} 

http://jsfiddle.net/Z52eR/

Außerdem, wenn Sie zwei Tasten haben, und Sie wollen, dass sie die gleiche Breite, die Sie brauchen noch nicht einmal die Größe jeder wissen, um ihnen die gleiche Breite zu sein - weil Der Tisch wird sie für dich magisch zusammenbrechen lassen.

http://jsfiddle.net/AK674/2/

(dies funktioniert auch, wenn sie wollen inline und Sie sind auf der Seite zwei Tasten Seite zum Zentrum - versuchen, dass mit Prozentsatz zu tun!).

Answer 5

Sie auf eine Schaltfläche Zentrieren kann text-align auf dem übergeordneten div durch einfache ohne margin:auto; display:block;

Zum Beispiel mit:

HTML

<div> 
    <button>Submit</button> 
</div> 

CSS

button{ 
    margin:auto; 
    display:block; 
} 

IT in Aktion:http://codepen.io/maudulus/pen/avBdpL

Answer 6

Hier ist die Lösung als gefragt

ist

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

Answer 7

Für mich ist es mit Flexbox gearbeitet.

eine CSS-Klasse um das übergeordnete div/Element hinzufügen mit:

.parent { 
    display: flex; 
} 

und für die Schaltfläche Verwendung:

.button { 
    justify-content: center; 
} 

Sie einen Elternteil div verwenden sollten, da sonst die Taste nicht " weiß was die Mitte der Seite/des Elements ist.