Ik probeer een HTML-knop precies in het midden van de pagina uit te lijnen, ongeacht de gebruikte browser. Het zweeft naar links terwijl het nog steeds in het verticale midden staat of ergens op de pagina, zoals bovenaan de pagina, enz.
Ik wil dat het zowel verticaal als horizontaal gecentreerd is. Dit is wat ik nu heb geschreven:
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
mybuttonname
</button>
Antwoord 1, autoriteit 100%
Hier is uw oplossing: JsFiddle
Plaats uw knop in een div met gecentreerde tekst:
<div class="wrapper">
<button class="button">Button</button>
</div>
Met de volgende stijlen:
.wrapper {
text-align: center;
}
.button {
position: absolute;
top: 50%;
}
Er zijn veel manieren om een kat te villen, en dit is er maar één.
Antwoord 2, autoriteit 46%
Je kunt een button
centreren zonder text-align
op de bovenliggende div
te gebruiken door eenvoudig margin:auto; display:block;
Bijvoorbeeld:
HTML
<div>
<button>Submit</button>
</div>
CSS
button {
margin:auto;
display:block;
}
ZIE HET IN ACTIE:CodePen
Antwoord 3, autoriteit 13%
Bewerkt door auteur: dit is echt een verouderd antwoord! Flexbox of grid zijn veel beter.
Ik ben onlangs echt naar display: table
gegaan om dingen een vaste grootte te geven, bijvoorbeeld om margin: 0 auto
te laten werken. Heeft mijn leven een stuk makkelijker gemaakt. U hoeft alleen maar voorbij te gaan aan het feit dat ‘tabel’-weergave niet tabel-html betekent.
Het is vooral handig voor responsief ontwerp waar dingen gewoon harig en gek worden, 50% verliet dit en -50% dat gewoon onhandelbaar wordt.
style
{
display: table;
margin: 0 auto
}
Bovendien, als je twee knoppen hebt en je wilt dat ze dezelfde breedte hebben, hoef je niet eens de grootte van elk te weten om ze dezelfde breedte te geven – omdat de tabel ze op magische wijze voor je zal samenvouwen.
(dit werkt ook als ze inline zijn en je twee knoppen naast elkaar wilt centreren – probeer dat eens met percentages!).
Antwoord 4, autoriteit 6%
probeer dit, het is vrij eenvoudig en u kunt geen wijzigingen aanbrengen in uw .css-bestand, dit zou moeten werken
<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>
Antwoord 5, autoriteit 4%
Hier is de oplossing zoals gevraagd
<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>
Antwoord 6, autoriteit 3%
Voor mij werkte het met flexbox.
Voeg een CSS-klasse toe rond het bovenliggende div / element met :
.parent {
display: flex;
}
en voor de knop gebruik:
.button {
justify-content: center;
}
Je moet een bovenliggende div gebruiken, anders ‘weet’ de knop niet wat het midden van de pagina / het element is.
Antwoord 7, autoriteit 3%
Er zijn meerdere manieren om hetzelfde op te lossen. PFB twee van hen –
Eerste manier met positie: vast– positie: vast; posities ten opzichte van de viewport, wat betekent dat deze altijd op dezelfde plaats blijft, zelfs als de pagina wordt gescrold. Als u de linker- en bovenste waarde toevoegt aan 50%, wordt deze in het midden van het scherm geplaatst.
button {
position: fixed;
left: 50%;
top:50%;
}
Tweede weg met marge: auto-marge: 0 auto; voor horizontaal centreren, maar marge: auto; heeft geweigerd te werken voor verticaal centreren… tot nu toe! Maar eigenlijk vereist absolute centrering alleen een aangegeven hoogte en deze stijlen:
button {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 40px;
}
Antwoord 8
Plaats het in een andere div, gebruik CSS om de knop naar het midden te verplaatsen:
<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 is een voorbeeld: JsFiddle
Antwoord 9
Maak alle bovenliggende elementen met 100% breedte en 100% hoogte en gebruik display: table;en display:table-cell;, controleer het werkvoorbeeld.
p>
<!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>