Bagaimana cara memusatkan tombol di dalam div?


220

Saya memiliki div yang lebarnya 100%.

Saya ingin memusatkan tombol di dalamnya, bagaimana saya bisa melakukan ini?

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


kode apa yang Anda gunakan untuk tombol?
David Nguyen

2
Saya curiga dia menginginkan pemusatan vertikal dan horizontal. Sejauh ini tidak ada solusi yang berhasil. CSS tidak pandai vertikal centering = (.
mrtsherman

izinkan saya untuk mengatakan bahwa flexbox menjadikan jawaban ini tidak berguna untuk 2014. ya sayang!
foreyez

Jawaban:


352

Jawaban yang Diperbarui

Memperbarui karena saya perhatikan itu jawaban aktif, namun Flexbox akan menjadi pendekatan yang benar sekarang.

Demo Langsung

Penjajaran vertikal dan horizontal.

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

Hanya horisontal (selama sumbu flex utama adalah horisontal yang merupakan standar)

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

Jawaban Asli menggunakan lebar tetap dan tidak ada flexbox

Jika poster asli menginginkan pelurusan vertikal dan tengah, cukup mudah untuk lebar dan tinggi tombol yang tetap, coba yang berikut ini

Demo Langsung

CSS

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

hanya untuk menggunakan perataan horisontal

button{
    margin: 0 auto;
}

atau

div{
    text-align:center;
}

21
-1 ini mengerikan. Pada dasarnya, Anda mengatur lebar ke 100% dan kemudian margin ke -50. Tetapi menyebabkan masalah lain, seperti tombol naik di atas elemen yang mengandung, dan tidak bekerja dengan baik dengan mengubah ukuran.
CodyBugstein

3
Hai terima kasih untuk setidaknya menjelaskan suara Anda ke bawah @ IMray, Juga perhatikan, saya katakan lebar dan tinggi tetap , bukan variabel. Jadi mengubah ukuran bukanlah faktor. "Pada dasarnya" Saya mengatur lebar ke 100px , bukan 100%, dan margin ke -50px yang setengah. Ini telah menjadi metode yang cukup standar untuk pemusatan. Saya menantikan jawaban Anda :)
Loktar

1
Welc Anda (maaf atas kekerasannya, senang Anda memiliki selera humor) Maksud saya 100px. Saya tidak menyadari Anda menulis "diperbaiki", tetapi tetap saya pikir jawaban ini tidak akan baik di sebagian besar situasi
CodyBugstein

109

Anda bisa saja membuat:

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

Atau Anda bisa melakukannya seperti ini:

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

Yang pertama akan memusatkan menyelaraskan semua yang ada di dalam div. Yang lain akan memusatkan menyelaraskan hanya tombol.


28

et voila:

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

Pembaruan : Jika OP mencari pusat horizontal dan vertikal, jawaban ini akan melakukannya untuk elemen lebar / tinggi tetap.


11
Anda mungkin juga perlu "display: block;"
SoluableNonagon

1
@SoluableNonagon Itu dia! "display: block" melakukan trik dengan "margin: 0 auto"
Tomas Lukac

8

Margin: 0 otomatis; adalah jawaban yang benar untuk pemusatan horizontal saja. Untuk memusatkan kedua cara, sesuatu seperti ini akan berfungsi, menggunakan 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);

Perbarui ... lima tahun kemudian , seseorang dapat menggunakan flexbox pada elemen DIV induk untuk dengan mudah memusatkan tombol baik secara horizontal maupun vertikal.

Termasuk semua awalan peramban, untuk dukungan terbaik

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


2
jQuery? Serius?
Pranesh Ravi

3
@PraneshRavi - pada tahun 2011 tidak ada banyak pilihan yang tersedia di CSS untuk memusatkan sesuatu secara vertikal, jadi ya, javascript tidak biasa jika Anda tidak tahu tinggi dan lebar elemen yang tepat, dan dapat mengurangi margin.
adeneo

Anda selalu dapat menggunakan flex untuk memusatkan elemen baik secara vertikal maupun horizontal.
Pranesh Ravi

6
@PraneshRavi - ya Anda bisa, flexbox adalah jawaban yang bagus untuk pertanyaan ini, dan saya akan menambahkannya, tetapi pada 2011 tidak ada flexbox.
adeneo

@JGallardo - Saya pikir Anda melewatkan bagian di mana jawaban lain mencoba memusatkan tombol tidak hanya secara horizontal, tetapi juga secara vertikal, dan bahwa 9 tahun yang lalu tidak ada pilihan yang baik untuk melakukannya dengan CSS saja
adeneo


7

Menggunakan flexbox

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

Dan kemudian menambahkan kelas ke tombol Anda.

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

6

Anda harus membuatnya sederhana di sini Anda pergi:

pertama Anda memiliki posisi awal teks atau tombol Anda:

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

Dengan menambahkan baris kode css ini ke tag h2 atau ke tag div yang menyimpan tag tombol

style: "text-align: center;"

Akhirnya kode hasil akan menjadi:

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

masukkan deskripsi gambar di sini


you are welcom brother
nadir hamidou


2

Untuk memusatkan secara <button type = "button">vertikal dan horizontal dalam <div>lebar yang dihitung secara dinamis seperti pada kasus Anda, inilah yang harus dilakukan:

  1. Setel text-align: center;ke pembungkus <div>: ini akan memusatkan tombol setiap kali Anda mengubah ukuran <div>(atau lebih tepatnya jendela)
  2. Untuk penyelarasan vertikal, Anda perlu mengatur margin: valuepx;tombol. Ini adalah aturan tentang cara menghitung valuepx:

    valuepx = (wrappingDIVheight - buttonHeight)/2

Berikut ini adalah demo JS Bin .


2

Jawaban super sederhana yang akan berlaku untuk sebagian besar kasus adalah dengan hanya mengatur margin 0 autodan mengatur tampilan block. Anda dapat melihat bagaimana saya memusatkan tombol saya di demo saya di CodePen

masukkan deskripsi gambar di sini


1

Hal yang paling mudah adalah memasukkannya sebagai "div", berikan "margin: 0 auto" tetapi jika Anda ingin memusatkannya, Anda harus memberi lebar.

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

1

Opsi CSS responsif untuk memusatkan tombol secara vertikal dan horizontal tanpa memedulikan ukuran elemen induk (menggunakan kait atribut data untuk masalah kejelasan dan pemisahan) :

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/


1

Cara responsif untuk memusatkan tombol Anda di 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>

1
Jawaban ini dapat ditingkatkan dengan menghapus gaya sebaris dan menunjukkan demo
JGallardo

1

Misalkan div adalah #div dan tombol adalah #button:

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

#button {}

Kemudian bersarang tombol ke div seperti biasa.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.