Tombol Align di bagian bawah div menggunakan CSS


105

Saya ingin menyelaraskan tombol saya di sudut kanan bawah div saya. Bagaimana saya bisa melakukan itu?

masukkan deskripsi gambar di sini

CSS div saat ini:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

Jawaban:


224

Anda dapat menggunakan position:absolute;untuk benar-benar memposisikan sebuah elemen dalam div induk. Saat menggunakan position:absolute;elemen akan diposisikan secara mutlak dari div induk yang diposisikan pertama, jika tidak dapat menemukannya maka akan diposisikan secara absolut dari jendela sehingga Anda perlu memastikan div konten diposisikan.

Untuk membuat div konten diposisikan, semua positionnilai yang tidak statis akan berfungsi, tetapi relativepaling mudah karena tidak mengubah posisi div dengan sendirinya.

Jadi tambahkan position:relative;ke div konten, hapus float dari tombol dan tambahkan css berikut ke tombol:

position: absolute;
right:    0;
bottom:   0;

1
@Harry Joy: Apakah Anda juga menerapkan position: relativeke elemen yang berisi tombol formulir + Anda?
tigapuluhdot

1
@Harry Joy: Maka itu harus relatif terhadap itu div, bukan halamannya. Jika footer juga terdapat di dalamnya div, mungkin tampilannya sama saja. Jika Anda mengetahui ketinggian footer Anda, pada tombolnya Anda dapat menggunakan bottom: HEIGHT_OF_FOOTERpx.
tigapuluhdot

1
@Harry Joy: Lalu ada terlalu banyak kebingungan di sini. Anda harus memposting HTML / CSS Anda sebagai kasus uji jsFiddle .
tigapuluhdot

1
@ thirtydot: Berhasil. Thnx. salah tempat posisi: relatif. Menambahkannya di div yang salah.
Harry Joy

3
Sungguh, saya hanya perlu memberi komentar dan benar-benar menunjukkan betapa senangnya saya menemukan solusi ini. Ini telah mengganggu saya selama bertahun-tahun!
K. Kilian Lindberg

31

Flexbox CSS3 juga dapat digunakan untuk menyelaraskan tombol di bagian bawah elemen induk.

HTML yang dibutuhkan:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS yang diperlukan:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Tangkapan layar:

Gambar Keluaran

Sumber Daya Berguna:


12

Penampung induk harus memiliki ini:

position: relative;

Tombol itu sendiri harus memiliki ini:

position: relative;
bottom: 20px;
right: 20px;

atau apapun yang kamu suka


6
Perhatikan bahwa pertanyaan ini ditanyakan hampir 3 tahun yang lalu dan mendapat jawaban.
Itay Gal

Perhatikan bahwa jawaban ini salah. Dengan position:relativeadanya tombol tersebut akan dipindahkan dari posisi semula bukan berdasarkan induknya.
Kokos

1
Anda perlu menggunakan position: absoluteuntuk itu dari kanan bawah.
CaptainBli

-26

Pergi ke kanan dan dapat digunakan dengan cara yang sama untuk kiri

.yourComponent
{
   float: right;
   bottom: 0;
}

3
Ini hanya menyelaraskan tombol Anda ke kanan. Bukan kanan bawah.
Ruben
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.