probeert de html-knop uit te lijnen in het midden van de mijn pagina

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 buttoncentreren zonder text-alignop de bovenliggende divte 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: tablegegaan om dingen een vaste grootte te geven, bijvoorbeeld om margin: 0 autote 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
}

JsFiddle

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.

voer hier de afbeeldingsbeschrijving in

JsFiddle

(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>

Werkende Git-versie

<!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>

Other episodes