Hoe een knop te centreren in een div?

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

Antwoord 3, autoriteit 8%

et voila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

Update: als OP zoekt naar horizontaal en verticaal centrum, dan is dit antwoordvoldoende het voor een element met een vaste breedte/hoogte.

Antwoord 4, autoriteit 2%

Marge: 0 automatisch; is het juiste antwoord voor alleen horizontaal centreren.
Voor het centreren van beide kanten werkt zoiets als dit, met behulp van jQuery:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};
$(window).bind("load, resize", cenBtn);

Update … vijf jaar laterzou men flexbox op het bovenliggende DIV-element kunnen gebruiken om de knop gemakkelijk zowel horizontaal als verticaal te centreren.

Inclusief alle browser-voorvoegsels, voor de beste ondersteuning

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

Antwoord 5, autoriteit 2%

Met de beperkte details die worden verstrekt, ga ik uit van de meest eenvoudige situatie en zeg ik dat je text-align: centerkunt gebruiken:

http://jsfiddle.net/pMxty/

Antwoord 6, autoriteit 2%

Flexbox gebruiken

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

En dan de klas aan je knop toevoegen.

<button class="Center">Demo</button> 

Antwoord 7, autoriteit 2%

Je moet het simpel houden:

eerst heb je de beginpositie van je tekst of knop :

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

Door deze CSS-coderegel toe te voegen aan de h2-tag of aan de div-tag die de button-tag bevat

style:” text-align:center; ”

Eindelijk De resultaatcode zal zijn:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->
      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

Antwoord 8

Om een <button type = "button">zowel verticaal als horizontaal te centreren binnen een <div>waarvan de breedte dynamisch wordt berekend, zoals in uw geval, dit is wat je moet doen:

1. Stel text-align: center;in op de terugloop <div>: hierdoor wordt de knop gecentreerd wanneer u de grootte van de <div>(of liever het venster)

2. Voor de verticale uitlijning moet je margin: valuepx;instellen voor de knop. Dit is de regel voor het berekenen van valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Hier is een JS Bin-demo.

Antwoord 9

kwam dit over en dacht dat ik de oplossing die ik ook gebruikte, die het gebruik van line-heighten text-align: centergebruikt om zowel verticaal als horizontaal te gebruiken Centreren:

klik hier voor werken jsfiddle

Antwoord 10

Super eenvoudig antwoord dat op de meeste gevallen van toepassing is, is om gewoon de marge in te stellen op 0 autoen het display instellen op block. Je kunt zien hoe ik mijn knop gecentreerd in mijn demo op Codepen

Antwoord 11

DIVPPOSING DIV IS #DIV EN KNOP IS #BUTTON:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}
#button {}

Nest vervolgens de knop in div zoals gewoonlijk.

Antwoord 12

Het gemakkelijkst is het invoeren als een “div” geven het een “marge: 0 auto”, maar als u wilt dat het gecentreerd is, moet u het een breedte geven

 Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

Antwoord 13

Reagerende CSS-optie om een ​​knop verticaal en horizontaal te centreren zonder zich bezig te houden met ouderelementgrootte (met behulp van gegevenskenmerkhaken voor duidelijkheid en scheidingsproblemen) :

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

Antwoord 14

responsieve manier om uw knop in een div te centreren:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

Antwoord 15

div {
    text-align : center;
}
button {
    width: 50%;
    margin: 1rem auto;
}

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>