Cara memusatkan secara horizontal <div>


4288

Bagaimana saya bisa memusatkan secara horizontal di <div>dalam orang lain <div>menggunakan CSS?

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

13
Dari jawaban-jawaban hebat itu, saya hanya ingin menyoroti bahwa Anda harus memberi "#inner" sebuah "lebar", atau itu akan menjadi "100%", dan Anda tidak bisa memastikan apakah itu sudah terpusat.
Jony

Joma Tech membawa saya ke sini
Barbu Barbu

@Barbu Barbu: Dalam hal apa? Dalam konteks apa?
Peter Mortensen

Jawaban:


4727

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

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

Tentu saja, Anda tidak perlu mengatur widthuntuk 50%. Lebar kurang dari isi <div>akan bekerja. Inilah margin: 0 autoyang dilakukan pemusatan yang sebenarnya.

Jika Anda menargetkan Internet Explorer 8 (dan lebih baru), mungkin lebih baik memilikinya:

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

Ini akan membuat pusat elemen dalam secara horizontal dan berfungsi tanpa menetapkan yang spesifik width.

Contoh kerja di sini:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


12
Untuk pemusatan vertikal, saya biasanya menggunakan "garis-tinggi" (garis-tinggi == tinggi). Ini sederhana dan bagus tetapi hanya bekerja dengan teks satu baris konten :)
Nicolas Guillaume

98
Anda harus menggunakan tag! DOCTYPE pada halaman html Anda untuk membuatnya bekerja dengan baik di IE.
Fabio

15
Perhatikan bahwa mungkin perlu menambahkan "float: none;" untuk #inner.
Mert Mertce

15
Anda juga mengatur margin atas dan bawah ke 0, yang tidak terkait. Lebih baik margin-left: auto; margin-right: autosaya pikir.
Emmanuel Touzery

13
Tidak harus margin:0 auto: itu bisa menjadi margin: <whatever_vertical_margin_you_need> automargin horisontal kedua.
YakovL

1247

Jika Anda tidak ingin menetapkan lebar tetap di bagian dalam divAnda 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 membuat bagian dalam divmenjadi elemen inline yang dapat dipusatkan text-align.


13
@ SaabaAhang sintaks yang benar untuk itu float: none;dan mungkin hanya diperlukan karena #inner telah mewarisi floatsalah satu leftatau rightdari tempat lain di CSS Anda.
Doug McLean

8
Ini solusi yang bagus. Ingatlah bahwa batin akan mewarisi text-alignsehingga Anda mungkin ingin menetapkan batin text-alignuntuk initialatau nilai lainnya.
pmoleri

solusi yang bagus Saya kira begitu
simon

381

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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

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

Flex :

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

Baca lebih lanjut tentang memusatkan elemen anak

Dan ini menjelaskan mengapa model kotak adalah pendekatan terbaik :


25
Pastikan Anda membaca jawaban ini terlebih dahulu sebelum Anda menerapkan solusi ini.
cimmanon

4
Safari, seperti yang sekarang, masih memerlukan -webkitbendera untuk flexbox ( display: -webkit-flex;dan -webkit-align-items: center;dan -webkit-justify-content: center;)
Joseph Hansen

Saya selalu berpikir bahwa menggunakan kode lot adalah praktik yang buruk misalnya dengan kode ini saya memusatkan div saya: display: table; margin: otomatis; sederhana dan mudah
simon

Apakah saya atau snipet kode ini tidak terpusat
Mike

Pada tahun 2020 kita dapat menggunakan flexbox caniuse.com/#feat=flexbox
tonygatta

251

Misalkan lebar div Anda adalah 200 piksel:

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

Pastikan elemen induk diposisikan , yaitu relatif, tetap, absolut, atau lengket.

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

https://jsfiddle.net/gjvfxxdj/

Dengan CSS calc () , kode bisa menjadi lebih sederhana:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Prinsipnya masih sama; letakkan item di tengah dan ganti lebar.


Saya tidak suka solusi ini karena ketika elemen dalam terlalu luas untuk layar, Anda tidak dapat menggulir seluruh elemen secara horizontal. margin: 0 otomatis berfungsi lebih baik.
Aloso

margin-left: auto; margin-right: otomatis; memusatkan elemen tingkat blok
killscreen

Lebar default untuk sebagian besar elemen level blok adalah otomatis, yang mengisi area yang tersedia di layar. Hanya dipusatkan menempatkannya pada posisi yang sama dengan perataan kiri. Jika Anda menginginkannya terpusat secara visual, Anda harus menetapkan lebar (atau lebar maksimum meskipun Internet Explorer 6 dan yang lebih lama tidak mendukung ini, dan IE 7 hanya mendukungnya dalam mode standar).
killscreen

228

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

Kode 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 centerbahkan ketika Anda mengubah ukuran layar Anda.


12
+1 untuk metode ini, saya akan menjawabnya. Perhatikan bahwa Anda harus mendeklarasikan lebar pada elemen yang ingin Anda pusatkan secara horizontal (atau tinggi jika memusatkan secara vertikal). Berikut penjelasan lengkap: codepen.io/shshaw/full/gEiDt . Salah satu metode pemusatan elemen yang lebih fleksibel dan banyak didukung secara vertikal dan / atau horizontal.
stvnrynlds

6
Anda tidak dapat menggunakan padding di dalam div, tetapi jika Anda ingin memberikan ilusi gunakan perbatasan dengan warna yang sama.
Squirrl

Saya pikir agar metode ini berhasil, Anda perlu mengatur dengan dan tinggi div bagian dalam
Nicolas S.Xu

212

Beberapa poster telah menyebutkan cara CSS 3 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 memusatkan pada 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 */
}

Jika Anda perlu mendukung browser lama yang menggunakan sintaks lama untuk flexbox, inilah tempat yang bagus untuk dilihat.


apa yang Anda maksud dengan "sintaks sudah usang", apakah sudah usang?
Konga Raju

6
Spesifikasi Flexbox telah melalui 3 revisi besar. Draf terbaru adalah mulai September 2012, yang secara resmi mencela semua konsep sebelumnya. Namun, dukungan browser sangat jarang (terutama browser Android lama): stackoverflow.com/questions/15662578/…
cimmanon

Ini bekerja untuk saya di Chrome ketika versi Justin Poliey tidak.
Vern Jensen

Bukan "justify-content: center;" untuk perataan vertikal dan "align-items: center;" untuk penyelarasan horizontal?
Wouter Vanherck

3
@WouterVanherck itu tergantung pada flex-directionnilainya. Jika 'baris' (default) - maka justify-content: center; untuk perataan horizontal (seperti yang saya sebutkan dalam jawaban) Jika 'kolom' - maka justify-content: center;untuk perataan vertikal.
Danield

140

Jika Anda tidak ingin menetapkan lebar tetap dan tidak ingin margin tambahan, tambahkan display: inline-blockke elemen Anda.

Kamu bisa menggunakan:

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

3
persyaratan yang sama seperti tampilan: inline-block too ( quirksmode.org/css/display.html )
montrealmike

Saya menggunakan ini juga, tetapi saya belum pernah menemukan display: table;sebelumnya. Apa fungsinya?
Matt Cremeens

97

Memusatkan div yang tinggi dan lebarnya tidak diketahui

Secara horizontal dan vertikal. Ini bekerja dengan browser yang cukup modern (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, dll.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker dengannya lebih jauh di Codepen atau JSBin .


89

Itu tidak bisa dipusatkan jika Anda tidak memberi lebar. Jika tidak, maka akan, secara default, mengambil seluruh ruang horisontal.


49
dan jika Anda tidak tahu lebarnya? Katakan karena kontennya dinamis?
gman

lebar maks? bagaimana dengan itu?

1
Saya menggunakan width: fit-content;dan margin: 0 auto. Saya pikir ini bisa bekerja dengan lebar yang tidak diketahui.
Rick


88

Atur widthdan atur margin-leftdan margin-rightke auto. Itu hanya untuk horizontal . Jika Anda menginginkan keduanya, Anda hanya perlu melakukannya dengan dua cara. Jangan takut untuk bereksperimen; tidak seperti Anda akan merusak apa pun.


62

Saya baru-baru ini harus memusatkan div "tersembunyi" (yaitu, display:none;) yang memiliki bentuk tabel di dalamnya yang perlu dipusatkan pada halaman. Saya menulis kode jQuery berikut untuk menampilkan div tersembunyi dan kemudian memperbarui konten CSS ke lebar tabel yang dihasilkan secara otomatis dan mengubah margin ke pusatnya. (Tampilan beralih dipicu dengan mengklik tautan, tetapi kode ini tidak perlu ditampilkan.)

CATATAN: Saya membagikan kode ini, karena Google membawa saya ke solusi Stack Overflow ini dan semuanya akan berfungsi kecuali bahwa elemen tersembunyi tidak memiliki lebar dan tidak dapat diubah ukurannya / dipusatkan sampai setelah mereka ditampilkan.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>


59

Cara saya biasanya menggunakan posisi absolut:

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

Bagian luar tidak perlu propertites tambahan untuk bekerja.


Ini mungkin tidak berfungsi jika Anda memiliki div lain di bawah div tengah.
NoChance

54

Untuk Firefox dan Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Untuk Internet Explorer, Firefox, dan Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

The text-align:properti adalah opsional untuk browser modern, tapi perlu di Internet Explorer quirks Mode untuk dukungan warisan browser.


5
Tidak perlu properti perataan teks. Sama sekali tidak perlu.
Touhid Rahman

text-align sebenarnya diperlukan agar bisa bekerja dalam mode quick IE, jadi jika Anda tidak keberatan menambahkan sedikit ekspresi untuk mendukung browser lama, pertahankan di sana. (IE8 dengan aturan IE8 dan aturan IE7 keduanya bekerja tanpa penyelarasan teks, jadi mungkin hanya IE6 dan yang lebih tua yang peduli)
heytools

52

Menggunakan:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


47

Solusi lain untuk ini tanpa harus menetapkan lebar untuk salah satu elemen adalah menggunakan transformatribut CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Kuncinya adalah translateX(-50%)mengatur #innerelemen 50 persen ke kiri lebar sendiri. Anda dapat menggunakan trik yang sama untuk perataan vertikal.

Berikut adalah biola yang menunjukkan perataan horizontal dan vertikal.

Informasi lebih lanjut tentang Jaringan Pengembang Mozilla .


2
Satu mungkin perlu awalan vendor juga:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou

45

Chris Coyier yang menulis posting bagus tentang 'Centering in the Unknown' di blog-nya. Ini adalah kumpulan dari beberapa solusi. Saya memposting satu yang tidak diposting dalam pertanyaan ini. Ini memiliki lebih banyak dukungan browser daripada solusi Flexbox , dan Anda tidak menggunakan display: table;yang dapat merusak hal-hal lain.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

39

Baru-baru ini saya menemukan pendekatan:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Kedua elemen harus memiliki lebar yang sama agar berfungsi dengan benar.


Hanya mengatur aturan ini untuk #innerhanya: #inner { position:relative; left:50%; transform:translateX(-50%); }. Ini berfungsi untuk semua lebar.
Jose Rui Santos

33

Misalnya, lihat tautan ini dan cuplikan di bawah ini:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Jika Anda memiliki banyak anak di bawah orangtua, maka konten CSS Anda harus seperti contoh ini pada biola .

Tampilan konten HTML menyukai ini:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Kemudian lihat contoh ini tentang biola .


28

Hanya memusatkan secara horizontal

Dalam pengalaman saya, cara terbaik untuk memusatkan kotak secara horizontal adalah dengan menerapkan properti berikut:

Wadah:

  • harus punya text-align: center;

Kotak konten:

  • harus punya display: inline-block;

Demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Lihat juga Fiddle ini !


Berpusat secara horizontal & vertikal

Dalam pengalaman saya, cara terbaik untuk memusatkan kotak baik secara vertikal maupun horizontal adalah dengan menggunakan wadah tambahan dan menerapkan properti berikut:

Wadah luar:

  • harus punya display: table;

Wadah batin:

  • harus punya display: table-cell;
  • harus punya vertical-align: middle;
  • harus punya text-align: center;

Kotak konten:

  • harus punya display: inline-block;

Demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Lihat juga Fiddle ini !


27

Cara termudah:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


1
Seperti catatan biola Anda, #inner harus memiliki lebar yang ditetapkan di atasnya.
Michael Terry

#outertidak memerlukan apapun width:100%;seperti yang <div>selalu ada secara default width:100%. dan text-align:centerjuga tidak perlu sama sekali.
Mobarak Ali

27

Jika lebar konten tidak diketahui, Anda dapat menggunakan metode berikut . Misalkan kita memiliki dua elemen ini:

  • .outer - lebar penuh
  • .inner - tidak ada set lebar (tapi lebar maks bisa ditentukan)

Misalkan lebar elemen dihitung masing-masing 1000 piksel dan 300 piksel. Lanjutkan sebagai berikut:

  1. Bungkus .innerdi dalam.center-helper
  2. Buat .center-helperblok sebaris; itu menjadi ukuran yang sama dengan .innerlebar 300 piksel.
  3. Dorong .center-helper50% ke kanan relatif ke induknya; ini menempatkan sebelah kiri pada 500 piksel wrt. luar.
  4. Dorong .inner50% ke kiri relatif ke induknya; ini menempatkan kirinya di -150 piksel wrt. center helper yang berarti sebelah kirinya berada pada 500 - 150 = 350 piksel wrt. luar.
  5. Setel overflow .outerke tersembunyi untuk mencegah scrollbar horizontal.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>


26

Anda dapat melakukan sesuatu seperti ini

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Ini juga akan menyelaraskan #innervertikal. Jika Anda tidak ingin, hapus displaydan vertical-alignproperti;


25

Inilah yang Anda inginkan dengan cara terpendek.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

3
Itu memusatkannya secara vertikal.
Michael Terry

22

Perataan teks: tengah

Menerapkan text-align: centerkonten inline dipusatkan di dalam kotak baris. Namun karena div dalam telah secara default width: 100%Anda harus menetapkan lebar tertentu atau menggunakan salah satu dari berikut ini:


Margin: 0 otomatis

Menggunakan margin: 0 autoadalah pilihan lain dan lebih cocok untuk kompatibilitas browser yang lebih lama. Ini bekerja bersama display: table.


Flexbox

display: flexberperilaku seperti elemen blok dan menjabarkan isinya sesuai dengan model flexbox. Ini bekerja dengan justify-content: center.

Harap dicatat: Flexbox kompatibel dengan sebagian besar browser tetapi tidak semua. Lihat di sini untuk daftar kompatibilitas browser yang lengkap dan terbaru.


Mengubah

transform: translatememungkinkan Anda memodifikasi ruang koordinat model pemformatan visual CSS. Menggunakannya, elemen dapat diterjemahkan, diputar, diskalakan, dan miring. Untuk memusatkan secara horizontal diperlukan position: absolutedan left: 50%.


<center> (Sudah usang)

Tag <center>adalah alternatif HTML untuk text-align: center. Ini berfungsi pada browser lama dan sebagian besar yang baru tetapi tidak dianggap sebagai praktik yang baik karena fitur ini sudah usang dan telah dihapus dari standar Web.


22

Anda dapat menggunakan display: flexuntuk div luar Anda dan untuk memusatkan secara horizontal Anda harus menambahkanjustify-content: center

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

atau Anda dapat mengunjungi w3schools - CSS flex Property untuk lebih banyak ide.


21

Flex memiliki lebih dari 97% cakupan dukungan browser dan mungkin menjadi cara terbaik untuk menyelesaikan masalah semacam ini dalam beberapa baris:

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

21

Yah, saya berhasil menemukan solusi yang mungkin cocok untuk semua situasi, tetapi menggunakan JavaScript:

Berikut strukturnya:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Dan inilah cuplikan JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Jika Anda ingin menggunakannya dalam pendekatan responsif, Anda dapat menambahkan yang berikut:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

21

Metode ini juga berfungsi dengan baik:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Untuk bagian dalam <div>, satu-satunya syarat adalah kondisinya heightdan widthtidak boleh lebih besar dari wadahnya.


19

Ada satu opsi yang saya temukan:

Semua orang mengatakan untuk menggunakan:

margin: auto 0;

Tetapi ada opsi lain. Setel properti ini untuk div induk. Ini berfungsi dengan baik kapan saja:

text-align: center;

Dan lihat, anak pergi pusat.

Dan akhirnya CSS untuk Anda:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

text-align berfungsi untuk penyelarasan teks dalam wadahnya bukan untuk wadahnya kepada induknya.
Lalit Kumar Maurya

saya mengujinya, saya masalah dengan mengatur anak ke pusat, harus ketika Anda memiliki lebih dari satu anak, lebih banyak margin kali: 0 jawaban font otomatis, tetapi, pusat perataan teks, untuk orang tua membuat anak ini menjadi pusat, bahkan jika mereka elemen dan tidak menjadi teks, tes dan lihat apa yang terjadi
Pnsadeghy

text-align center text saja. Anda benar saat ini tetapi ketika Anda menulis sebuah css kontainer yang berisi anak dengan lebar dan warna yang berbeda, kode Anda tidak berfungsi. Uji lagi !!!!
Lalit Kumar Maurya

Lihat contoh ini jsfiddle.net/uCdPK/2 dan katakan padaku apa pendapatmu tentang itu !!!!!
Lalit Kumar Maurya
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.