Pertanyaan Bagaimana cara memusatkan
secara horizontal di
lain?


Bagaimana saya bisa secara horizontal memusatkan a <div> dalam yang lain <div> menggunakan CSS (apakah itu mungkin)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3626
2018-06-09 08:34


asal


Jawaban:


Anda dapat menerapkan CSS ini ke bagian dalam <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Tentu saja, Anda tidak perlu mengaturnya width untuk 50%. Setiap lebar kurang dari yang mengandung <div> akan bekerja. Itu margin: 0 auto adalah apa yang sebenarnya centering.

Jika Anda menargetkan IE8 +, mungkin lebih baik memiliki ini sebagai gantinya:

#inner {
  display: table;
  margin: 0 auto;
}

Ini akan membuat pusat elemen batin secara horizontal dan bekerja tanpa pengaturan yang spesifik width.

Contoh kerja di sini:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4087



Jika Anda tidak ingin mengatur lebar tetap pada bagian dalam div Anda bisa melakukan sesuatu seperti ini:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Itu yang membuat batin div menjadi elemen inline yang dapat dipusatkan text-align.


1109



Pendekatan terbaik adalah dengan CSS 3.

Model kotak:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Menurut kegunaan Anda, Anda juga dapat menggunakan box-orient, box-flex, box-direction properti.

Melenturkan:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Baca selengkapnya tentang memusatkan elemen turunan

Dan ini menjelaskan mengapa model kotak adalah pendekatan terbaik:


297



Misalkan div Anda 200px lebar:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Pastikan elemen induknya diposisikan yaitu relatif, tetap, mutlak, atau lengket.

Jika Anda tidak tahu lebar dari div Anda, Anda bisa menggunakannya transform:translateX(-50%); bukannya margin negatif.

https://jsfiddle.net/gjvfxxdj/


215



Saya telah membuat ini contoh untuk menunjukkan caranya secara vertikal dan secara horizontal  align.

Kode pada dasarnya adalah ini:

#outer {
  position: relative;
}

dan...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

dan itu akan tetap di center bahkan ketika kamu ukuran ulang layar Anda.


200



Beberapa poster telah menyebutkan CSS 3 cara untuk menggunakan pusat display:box.

Sintaks ini sudah usang dan tidak boleh digunakan lagi. [Lihat juga posting ini].

Jadi hanya untuk kelengkapan di sini adalah cara terbaru untuk berpusat di CSS 3 menggunakan Modul Layout Kotak Fleksibel.

Jadi jika Anda memiliki markup sederhana seperti:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... dan Anda ingin memusatkan item Anda di dalam kotak, inilah yang Anda butuhkan pada elemen induk (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Jika Anda perlu mendukung browser lama yang menggunakan sintaks yang lebih lama untuk flexbox ini tempat yang bagus untuk dilihat.


156



Jika Anda tidak ingin mengatur lebar tetap dan tidak ingin margin tambahan, tambahkan display: inline-block ke elemen Anda.

Kamu dapat memakai:

#element {
    display: table;
    margin: 0 auto;
}

119



Properti box-align CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

74



Tidak dapat dipusatkan jika Anda tidak memberikannya lebar, jika tidak maka akan memakan, secara default seluruh ruang horisontal.


73