Jak wyśrodkować przycisk w div?

220

Mam div, którego szerokość wynosi 100%.

Chciałbym wyśrodkować przycisk w środku, jak mogę to zrobić?

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

foreyez
źródło
jakiego kodu używasz dla przycisku?
David Nguyen,
2
Podejrzewam, że chce zarówno centrowania w pionie, jak i w poziomie. Żadne z dotychczasowych rozwiązań tego nie osiągnęło. CSS nie jest bardzo dobry w centrowaniu pionowym = (.
mrtsherman
powiem tylko, że Flexbox czyni tę odpowiedź bezużyteczną na 2014 rok. tak kochanie!
foreyez

Odpowiedzi:

352

Zaktualizowana odpowiedź

Aktualizacja, ponieważ zauważyłem, że jest to aktywna odpowiedź, jednak Flexbox będzie teraz właściwym podejściem.

Demo na żywo

Wyrównanie w pionie i poziomie.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Tylko poziomo (o ile główna oś flex jest pozioma, co jest domyślne)

#wrapper {
  display: flex;
  justify-content: center;
}

Oryginalna odpowiedź przy użyciu stałej szerokości i bez Flexbox

Jeśli oryginalny plakat chce wyrównywania w pionie i środku jest dość łatwy dla stałej szerokości i wysokości przycisku, spróbuj wykonać następujące czynności

Demo na żywo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

tylko do wyrównania w poziomie użyj albo

button{
    margin: 0 auto;
}

lub

div{
    text-align:center;
}
Loktar
źródło
21
-1 to okropne. Zasadniczo ustawiasz szerokość na 100%, a następnie margines na -50. Ale powoduje inne problemy, takie jak przycisk wznosi się ponad element zawierający i nie działa dobrze przy zmianie rozmiaru.
CodyBugstein
3
Hej, dziękuję za przynajmniej wyjaśnienie twojego głosowania w dół @Imray. Pamiętaj też, że powiedziałem stałą szerokość i wysokość, a nie zmienną. Więc zmiana rozmiaru nie jest czynnikiem. „Zasadniczo” ustawiłem szerokość na 100 pikseli , a nie 100%, a margines na -50 pikseli, co stanowi połowę. Jest to dość standardowa metoda centrowania. Czekam jednak na twoją odpowiedź :)
Loktar
1
Wasze powitania (przepraszam za surowość, cieszę się, że masz poczucie humoru) Miałem na myśli 100px. Nie zdawałem sobie sprawy, że napisałeś „naprawiony”, ale myślę, że ta odpowiedź nie będzie dobra w większości sytuacji
CodyBugstein,
109

Możesz po prostu:

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

Lub możesz to zrobić w ten sposób:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

Pierwszy z nich wyśrodkuje wszystko w środku div. Drugi wyśrodkuje wyrównanie tylko przycisku.

RenatoSz
źródło
28

zrobione:

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

Aktualizacja : Jeśli OP szuka środka poziomego i pionowego, ta odpowiedź zrobi to dla elementu o stałej szerokości / wysokości.

Poklepać
źródło
11
możesz także potrzebować „display: block;”
SoluableNonagon,
1
@SoluableNonagon To wszystko! „display: block” rozwiązuje problem z „margin: 0 auto”
Tomas Lukac
8

Margines: 0 auto; jest poprawną odpowiedzią tylko dla centrowania poziomego. Do centrowania w obie strony działa coś takiego, używając 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);

Aktualizacja ... pięć lat później można użyć Flexboksa na nadrzędnym elemencie DIV, aby łatwo wyśrodkować przycisk zarówno w poziomie, jak i w pionie.

W tym wszystkie prefiksy przeglądarki dla najlepszego wsparcia

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;
}

adeneo
źródło
2
jQuery? Poważnie?
Pranesh Ravi
3
@PraneshRavi - w 2011 roku nie było wielu opcji dostępnych w CSS, aby wyśrodkować coś w pionie, więc tak, javascript nie był rzadkością, jeśli nie znasz dokładnej wysokości i szerokości elementu i możesz odjąć marginesy.
adeneo
Zawsze możesz użyć wygięcia, aby wyśrodkować element zarówno pionowo, jak i poziomo.
Pranesh Ravi
6
@PraneshRavi - tak, Flexbox to świetna odpowiedź na to pytanie i dodam to, ale w 2011 roku nie było Flexboksa.
adeneo
@JGallardo - Myślę, że przegapiłeś tę część, w której inne odpowiedzi starają się wyśrodkować przycisk nie tylko w poziomie, ale również w pionie, i że 9 lat temu nie było naprawdę dobrych opcji, aby to zrobić tylko z CSS
adeneo
7

Z podanymi ograniczonymi szczegółami założę najprostszą sytuację i powiem, że możesz użyć text-align: center:

http://jsfiddle.net/pMxty/

James Montagne
źródło
7

Korzystanie z Flexbox

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

A następnie dodając klasę do przycisku.

<button class="Center">Demo</button> 
Yask
źródło
6

Powinieneś zacząć od prostoty, proszę:

najpierw masz początkową pozycję tekstu lub przycisku:

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

Dodając ten wiersz kodu css do znacznika h2 lub znacznika div, który przechowuje znacznik przycisku

style: „text-align: center;”

Ostatecznie Kod wyniku będzie:

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

wprowadź opis zdjęcia tutaj

nadir hamidou
źródło
jesteś
mile widziany
2

Przekroczyłem to i pomyślałem, że zostawię również rozwiązanie, którego użyłem, które wykorzystuje line-heighti text-align: centerwykonuje zarówno centrowanie w pionie, jak i w poziomie:

Kliknij tutaj, aby uruchomić JSFiddle

lhan
źródło
2

Aby wyśrodkować <button type = "button">zarówno w pionie, jak iw poziomie, w obrębie <div>której szerokość jest obliczana dynamicznie, jak w twoim przypadku, wykonaj następujące czynności:

  1. Ustaw text-align: center;na zawijanie <div>: spowoduje to wyśrodkowanie przycisku przy każdej zmianie rozmiaru <div>(a raczej okna)
  2. W przypadku wyrównania w pionie należy ustawić margin: valuepx;przycisk. Jest to reguła obliczania valuepx:

    valuepx = (wrappingDIVheight - buttonHeight)/2

Oto demo JS Bin .

Billal Begueradj
źródło
2

Bardzo prosta odpowiedź, która będzie obowiązywać w większości przypadków, polega na ustawieniu marginesu 0 autoi ustawieniu wyświetlacza na block. Możesz zobaczyć, jak wycentrowałem mój przycisk w mojej wersji demonstracyjnej na CodePen

wprowadź opis zdjęcia tutaj

JGallardo
źródło
1

Najłatwiej jest wprowadzić go jako „div”, nadać mu „margines: 0 auto”, ale jeśli chcesz, aby był wyśrodkowany, musisz nadać mu szerokość

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }
Ashhad Sameer
źródło
1

Responsywna opcja CSS, aby wyśrodkować przycisk w pionie i poziomie, nie przejmując się wielkością elementu nadrzędnego (używając haczyków atrybutów danych w celu zapewnienia przejrzystości i separacji) :

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/

CR Rollyson
źródło
1

Elastyczny sposób na wyśrodkowanie przycisku w div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>
Maijied Hasan Shuvo
źródło
1
Odpowiedź można poprawić, usuwając style wbudowane i pokazując wersję demonstracyjną
JGallardo,
1

Załóżmy, że div to #div, a przycisk to #b przycisk:

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

#button {}

Następnie jak zwykle zagnieżdż przycisk w div.

Victor Nițu
źródło