wake-up-neo.net

versuchen, die HTML-Schaltfläche in der Mitte der my-Seite auszurichten

Ich versuche, eine HTML-Schaltfläche unabhängig vom verwendeten Browser genau in der Mitte der Seite auszurichten. Es schwebt entweder nach links, während es sich noch in der vertikalen Mitte befindet, oder es befindet sich irgendwo auf der Seite wie oben auf der Seite usw. 

Ich möchte, dass es sowohl vertikal als auch horizontal zentriert ist. Folgendes habe ich gerade geschrieben:

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

Hier ist deine Lösung: JsFiddle

Platzieren Sie Ihren Button grundsätzlich in einem Div mit zentriertem Text:

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

Mit den folgenden Stilen:

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

Es gibt viele Möglichkeiten, eine Katze zu enthäuten, und dies ist nur eine davon.

117
Mohamad

Sie können eine Schaltfläche zentrieren, ohne text-align Für das übergeordnete div zu verwenden, indem Sie einfach margin:auto; display:block; Verwenden.

Zum Beispiel:

[~ # ~] html [~ # ~]

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

[~ # ~] CSS [~ # ~]

button {
  margin:auto;
  display:block;
}

SEHEN SIE ES IN AKTION: CodePen

53
maudulus

Ich habe vor kurzem wirklich display: table genommen, um den Dingen eine feste Größe zu geben, damit margin: 0 auto funktionieren kann. Hat mein Leben sehr viel einfacher gemacht. Sie müssen nur an der Tatsache vorbeikommen, dass die Anzeige von Tabellen nicht Tabellen-HTML bedeutet.

Es ist besonders nützlich für responsives Design, bei dem die Dinge nur haarig werden und verrückte 50% das verlassen und -50% die einfach unüberschaubar werden.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

Wenn Sie zwei Schaltflächen haben und die gleiche Breite haben möchten, müssen Sie nicht einmal die Größe der einzelnen Tasten kennen, um die gleiche Breite zu erhalten - da der Tisch sie für Sie magisch zusammenbricht. 

enter image description here

JsFiddle

(Dies funktioniert auch, wenn sie inline sind und Sie zwei Knöpfe nebeneinander zentrieren möchten - versuchen Sie es mit Prozentsätzen!).

15
Simon_Weaver

probieren Sie dies aus, es ist ziemlich einfach und Sie können keine Änderungen an Ihrer .css-Datei vornehmen

<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>
4
Rick Roy

Hier ist die Lösung wie gefragt 

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

4
joy oares

Bei mir hat es mit Flexbox funktioniert. 

Fügen Sie eine CSS-Klasse um das übergeordnete div/Element mit hinzu:

.parent {
    display: flex;
}

und für die Schaltfläche verwenden:

.button {
    justify-content: center;
}

Sie sollten ein übergeordnetes div verwenden, andernfalls weiß die Schaltfläche nicht, was die Mitte der Seite/des Elements ist. 

2
Roy

Es gibt mehrere Möglichkeiten, dies zu beheben. PFB zwei von ihnen - 

1. Weg mit Position: fest - Position: fest; Positionen relativ zum Ansichtsfenster, dh es bleibt immer an der gleichen Stelle, auch wenn die Seite gescrollt wird. Wenn Sie den linken und oberen Wert zu 50% addieren, wird er in der Mitte des Bildschirms angezeigt.

 button {
   position: fixed;
   left: 50%;
   top:50%;
 }

2. Weg mit Rand: auto -margin: 0 auto; für horizontale Zentrierung, aber Rand: auto; hat sich geweigert, für vertikale Zentrierung zu arbeiten… bis jetzt! Eigentlich erfordert die absolute Zentrierung nur eine angegebene Höhe und diese Stile:

button {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
}
1
Maddy

Platziere es in einem anderen div, verschiebe den Button mit CSS in die Mitte:

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

1
Tim Withers

Machen Sie alle übergeordneten Elemente mit 100% Breite und 100% Höhe und verwenden Sie display: table; und display: Tabellenzelle;, überprüfen Sie die Arbeitsprobe.

Working Git Version

<!DOCTYPE html>
<html>
<head>
<style>
html,body{height: 100%;}
body{width: 100%;}
</style>
</head>
<body style="display: table; background-color: #ff0000; ">

<div style="display: table-cell; vertical-align: middle; text-align: center;">
    <button type="button" style="text-align: center;" class="btn btn-info">
       Discover More
    </button>
</div>

</body>
</html>
0
Ritesh Kumar