Bagaimana cara menyelaraskan 3 div (kiri / tengah / kanan) di dalam div lain?

392

Saya ingin memiliki 3 divs disejajarkan di dalam wadah div, sesuatu seperti ini:

[[LEFT]       [CENTER]        [RIGHT]]

Wadah penampung 100% lebar (tidak ada set lebar), dan pusat div harus tetap di tengah setelah mengubah ukuran wadah.

Jadi saya mengatur:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Tapi itu menjadi:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Ada tips?

html  css  flexbox  alignment  css-float 
— serg
sumber
1
Jika kontainer menjadi lebih sempit dari lebar 300px, itu akan terjadi kecuali Anda mengatur properti overflow.
— inkedmn
Flexbox dan juga Kotak: jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
Sekadar diketahui - Sesuai komentar @ inkedmn, dengan banyak konten di setiap kolom, saya tidak bisa membuat semuanya menyelaraskan dengan baik pada lebar wadah apa pun tanpa overflow: hidden;di centerkolom. Kemudian dalam permintaan media untuk perangkat kecil ketika saya memiliki semua 3 kolom di tengah halaman di atas satu sama lain, saya perlu overflow: hidden;di baris tengah (yang merupakan kolom kanan pada perangkat besar) jika tidak memiliki tinggi dan tidak terpusat secara vertikal antara baris atas dan bawah.
— Chris L

Jawaban:

364

Dengan CSS itu, tempatkan div Anda seperti itu (mengapung lebih dulu):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

PS Anda juga bisa melayang ke kanan, lalu ke kiri, lalu ke tengah. Yang penting adalah bahwa pelampung datang sebelum bagian tengah "utama".

PPS Anda sering ingin yang terakhir di dalam #containercuplikan ini: <div style="clear:both;"></div>yang akan meluas #containersecara vertikal untuk mengandung kedua sisi mengapung alih-alih mengambil ketinggiannya hanya dari #centerdan mungkin memungkinkan sisi-sisinya menonjol keluar dari bawah.

— dkamins
sumber
bagaimana Anda melakukannya jika wadahnya tidak 100%? Saya mencoba sesuatu seperti itu di sini, saya ingin div tetap di kanan wadah, tetapi mengapung di sebelah kanan halaman
— Tiago
@Tiago: Pelampung harus tetap dibatasi pada div jika mereka ada di dalamnya. Periksa berapa lebar wadah dengan mengaturnya border:solid. Jika 100% maka lampirkan ke div lain untuk menempatkannya di dalam halaman Anda.
— James P.
Juga - Jika Anda meletakkan ini di dalam wadah resizable, pastikan untuk mengatur min-lebar wadah untuk menjaga div melayang-kanan agar tidak didorong ke bawah.
— Tapefreak
6
Jawaban ini sudah lebih dari enam tahun. Pada 2016, jawaban yang benar adalah flexbox.
1
@torazaburo, mungkin ada lebih dari satu jawaban yang benar, ada banyak cara untuk mencapai titik yang sama, dalam hal ini, saya harus menggunakan solusi ini karena kerangka kerja yang saya gunakan, sudah ditetapkan kiri dan kanan dengan mengapung ke elemen, hanya saja menambahkan elemen tengah pada akhirnya sangat cocok untuk saya.
— Ninja Coding
128

Jika Anda tidak ingin mengubah struktur HTML Anda, Anda juga dapat melakukannya dengan menambahkan text-align: center;elemen pembungkus dan elemen display: inline-block;ke pusat.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Demo Langsung: http://jsfiddle.net/CH9K8/

— fruechtemuesli
sumber
1
Ini adalah satu-satunya solusi yang mengubah ukuran dengan benar dengan lebar jendela tanpa melipat terlalu cepat.
— Jared Sealey
2
Ini sempurna ketika ukuran Kiri dan Kanan sama. Kalau tidak, Center tidak terpusat.
— mortalis
127

Menyelaraskan Tiga Divs Secara Horizontal Menggunakan Flexbox

Berikut adalah metode CSS3 untuk menyelaraskan divs secara horizontal di dalam div lain.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Luaskan cuplikan

jsFiddle

The justify-contentproperti membutuhkan waktu lima nilai-nilai:

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around

Dalam semua kasus, tiga div berada di baris yang sama. Untuk deskripsi masing-masing nilai, lihat: https://stackoverflow.com/a/33856609/3597276

Manfaat flexbox:

  1. kode minimal; sangat efisien
  2. pemusatan, baik secara vertikal maupun horizontal, sederhana dan mudah
  3. kolom tinggi yang sama sederhana dan mudah
  4. beberapa opsi untuk meluruskan elemen fleksibel
  5. responsif
  6. tidak seperti pelampung dan tabel, yang menawarkan kapasitas tata letak terbatas karena tidak pernah dimaksudkan untuk membangun tata letak, flexbox adalah teknik modern (CSS3) dengan beragam pilihan.

Untuk mempelajari lebih lanjut tentang flexbox, kunjungi:

Dukungan browser: Flexbox didukung oleh semua browser utama, kecuali IE <10 . Beberapa versi browser terbaru, seperti Safari 8 dan IE10, memerlukan awalan vendor . Untuk cara cepat menambahkan awalan, gunakan Autoprefixer . Lebih detail dalam jawaban ini .

— Michael Benjamin
sumber
7
Flex jauh lebih baik daripada menggunakan pelampung.
— Faizan Akram Dar
1
Penjelasan hebat di sini dan di posting terkait! Sidenote: Menggunakan elemen "span" sebagai item flex di dalam div kontainer bekerja di firefox tetapi tidak bekerja di browser berbasis javafx (tampilan web). Mengubah "bentang" menjadi "div" bekerja di keduanya.
— Ashok
Internet Explorer 10 dan versi yang lebih lama tidak mendukung properti konten yang dapat
— dibenarkan
1
Sayangnya ini hanya berfungsi pada item dengan lebar yang sama. Juga lihat stackoverflow.com/questions/32551291/…
— handle
Luar biasa, saya mencoba semua solusi di sini dan ini yang terbaik!
— Nico Müller
22

Properti float sebenarnya tidak digunakan untuk menyelaraskan teks.

Properti ini digunakan untuk menambahkan elemen ke kanan atau kiri atau tengah. 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
Luaskan cuplikan

untuk float:leftoutput akan[First][second][Third]

untuk float:rightoutput akan[Third][Second][First]

Itu berarti properti float => left akan menambahkan elemen Anda berikutnya ke kiri yang sebelumnya, Sama halnya dengan kanan

Anda juga harus Mempertimbangkan lebar elemen induk, jika jumlah lebar elemen anak melebihi lebar elemen induk maka elemen berikutnya akan ditambahkan pada baris berikutnya

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
Luaskan cuplikan

[Pertama kedua]

[Ketiga]

Jadi Anda perlu Mempertimbangkan Semua aspek ini untuk mendapatkan hasil yang sempurna

— Rajiv Pingale
sumber
13

Saya suka batang saya ketat dan dinamis. Ini untuk CSS 3 & HTML 5

  1. Pertama, mengatur Lebar ke 100px membatasi. Jangan lakukan itu.

  2. Kedua, mengatur lebar penampung hingga 100% akan berfungsi dengan baik, sampai membicarakannya sebagai bilah header / footer untuk seluruh aplikasi, seperti bilah navigasi atau kredit / hak cipta. Gunakan right: 0;sebagai gantinya untuk skenario itu.

  3. Anda menggunakan id (hash #container, #leftdll) bukan kelas ( .container, .left, dll), yang baik-baik saja, kecuali jika Anda ingin mengulang pola gaya Anda di tempat lain dalam kode Anda. Saya akan mempertimbangkan menggunakan kelas sebagai gantinya.

  4. Untuk HTML, tidak perlu menukar pesanan untuk: kiri, tengah, & kanan. display: inline-block;memperbaikinya, mengembalikan kode Anda ke sesuatu yang lebih bersih dan logis agar lagi.

  5. Terakhir, Anda perlu membersihkan semua pelampung agar tidak berantakan dengan masa depan <div>. Anda melakukan ini denganclear: both;

Untuk meringkas:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Poin bonus jika menggunakan HAML dan SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

KELANCANGAN:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
— Eric Wanchic
sumber
12

Ada beberapa trik yang tersedia untuk menyelaraskan elemen.

01. Menggunakan Table Trick

Tampilkan cuplikan kode

02. Menggunakan Flex Trick

Tampilkan cuplikan kode

03. Menggunakan Trik Float

Tampilkan cuplikan kode

— Santosh Khalse
sumber
11

Ini dapat dengan mudah dilakukan menggunakan CSS3 Flexbox, sebuah fitur yang akan digunakan di masa depan (Ketika <IE9sudah benar-benar mati) oleh hampir setiap browser.

Periksa Tabel Kompatibilitas Browser

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Keluaran:

Tampilkan cuplikan kode

— Manoj Kumar
sumber
4

Dengan twitter bootstrap: 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
— Ka.
sumber
3

kemungkinan jawabannya, jika Anda ingin menjaga urutan html dan tidak menggunakan flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Tautan Pena Kode

— Pruthvi P
sumber
2

HTML:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; memberikan perataan tengah yang sempurna.

Demo JSFiddle

— Khalid Farhan
sumber
Ini hanya memusatkan div dalam contoh Anda karena elemen teks memiliki ukuran yang hampir sama, membuat satu teks lebih panjang dan #center div tidak lagi berada di tengah: jsfiddle.net/3a4Lx239
— Kai Noack
1

Saya melakukan upaya lain untuk menyederhanakan ini dan mencapainya tanpa perlu wadah.

HTML 

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Anda bisa melihatnya langsung di JSFiddle

— pengguna15100
sumber
1

Menggunakan Bootstrap 3 saya membuat 3 divs dengan lebar yang sama (dalam tata letak 12 kolom 4 kolom untuk setiap div). Dengan cara ini Anda dapat menjaga zona tengah Anda terpusat bahkan jika bagian kiri / kanan memiliki lebar yang berbeda (jika mereka tidak meluap ruang kolom mereka).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Untuk membuat struktur itu tanpa perpustakaan saya menyalin beberapa aturan dari Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

— mortalis
sumber
0

Berikut adalah perubahan yang harus saya buat untuk jawaban yang diterima ketika saya melakukan ini dengan gambar sebagai elemen tengah:

  1. Pastikan gambar terlampir di dalam div ( #centerdalam hal ini). Jika tidak, Anda harus mengatur displayke block, dan tampaknya memusatkan relatif ke ruang antara elemen melayang.

  2. Pastikan untuk mengatur ukuran gambar dan wadahnya:

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— Sam
sumber
0

Anda dapat mencoba ini:

Kode html Anda seperti ini:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

dan kode css Anda seperti ini:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

jadi, outputnya harus seperti ini:

[[LEFT]       [CENTER]        [RIGHT]]
— kishan Radadiya
sumber
-1 
.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess
— Shubham
sumber
2
Selamat Datang di Stack Overflow! Harap tambahkan beberapa penjelasan mengapa kode ini membantu OP. Ini akan membantu memberikan jawaban yang dapat dipelajari pemirsa di masa depan. Lihat Cara Menjawab untuk informasi lebih lanjut.
— Bidah Monyet
-3

Anda telah melakukannya dengan benar, Anda hanya perlu membersihkan kendaraan Anda. Cukup tambahkan 

overflow: auto;

ke kelas kontainer Anda.

— Mustapha ZEGAOULA
sumber
-6

Solusi termudah adalah dengan membuat tabel dengan 3 kolom dan pusatkan tabel itu.

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}
— Sthembiso F. Makhathini
sumber
-10 
#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
— byte
sumber
2
Daripada hanya memposting blok kode, tolong jelaskan mengapa kode ini menyelesaikan masalah yang ditimbulkan. Tanpa penjelasan, ini bukan jawaban.
— Martijn Pieters
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.