Center ein button in einem DIV
Ich habe Probleme beim zentrieren einer Schaltfläche innerhalb eines DIV.
Den Ergebnissen, die ich bekomme derzeit ist:
HTML:
<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>
CSS besteht aus:
#buttonDiv {
position: fixed;
width:200px;
height:200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-bottom-width:1px;
border-top-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style:solid;
border-color:#000000;
}
.button {
display:table-cell;
align-content:center;
vertical-align:middle;
}
Glaube ich, dass diese route sollte der text aber scheint nicht zu funktionieren für die Schaltfläche. Ich habe versucht, indem die Klasse direkt auf den button mit keine Freude.
Dank
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie hinzufügen von text-align-center der übergeordnete container ist, wird die Schaltfläche Mitte horizontal. Dann können Sie die top:50%; transform: translateY(-50%); trick, um vertikal zentrieren.
HTML
CSS
jsfiddle option 1
BEARBEITEN UNTEN
Wenn Sie brauchen, um zu halten '.Schaltfläche " div, können Sie einfach bewegen Sie die top:50%; transform: translateY(-50%); zu dieser Klasse.
HTML
CSS
jsfiddle option 2
Versuchen line-height der box zu seiner Höhe; Dann ist der button sichtbar, als die inline - element und fügen Sie text-align:center
CSS:
HTML:
Wie etwa:
CSS: