Center Align pada Div

Question 1

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Div ada di atas, tapi saya tidak bisa memusatkannya dengan <center>ataumargin: 0 auto ;

Question 2

Masalah Anda mungkin terpecahkan jika Anda memberikan divlebar tetap, sebagai berikut:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

Question 3

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

Question 4

Saya tahu saya terlambat ke pesta, tetapi saya pikir saya akan memberikan jawaban di sini untuk orang-orang yang perlu memposisikan item absolut secara horizontal, ketika Anda tidak tahu lebarnya secara tepat.

Coba ini:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Teknik yang sama juga dapat diterapkan, saat Anda mungkin membutuhkan perataan vertikal, cukup dengan menyesuaikan properti seperti ini:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Question 5

Untuk memusatkannya baik secara vertikal maupun horizontal lakukan ini:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Question 6

Jika Anda perlu memiliki lebar relatif (dalam persentase), Anda dapat menggabungkan div Anda dalam posisi absolut:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Ingatlah bahwa untuk memposisikan elemen secara mutlak, elemen induk harus diposisikan secara relatif.

Question 7

Saya mengalami masalah yang sama, dan batasan saya adalah saya tidak dapat memiliki lebar yang telah ditentukan sebelumnya. Jika elemen Anda tidak memiliki lebar tetap, coba ini

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

lalu ubah html Anda agar terlihat seperti ini

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

Question 8

Atau Anda dapat menggunakan unit relatif, mis

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

Question 9

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Luaskan cuplikan

Question 10

Iya:

div#thing { text-align:center; }

Answer 1

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Div ada di atas, tapi saya tidak bisa memusatkannya dengan <center>ataumargin: 0 auto ;

Answer 2

152

Masalah Anda mungkin terpecahkan jika Anda memberikan divlebar tetap, sebagai berikut:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

JacobE
sumber

1

Saya tidak tahu mengapa saya tidak memikirkannya, meskipun kami menggunakan teknik yang sama untuk pemusatan vertikal sepanjang waktu ... Terima kasih, Anda menghemat banyak waktu.

Aayush

1

bagaimana jika pengguna telah menggulir vertikal ke bawah div muncul di bagian atas halaman sementara itu seharusnya muncul di area yang terlihat

PUG

Saya menampilkan thumbnail dari gambar yang diubah ukurannya secara dinamis di div overlay saya, jadi saya tidak tahu lebarnya.

PUG

4

ini hanya solusi, stackoverflow.com/questions/1776915/… tampaknya menjadi solusinya

PUG

1

Ini bukanlah jawaban yang benar. Jenis media yang berbeda tidak akan mendukung cuplikan ini.

Sushan

Answer 3

1

Saya tidak tahu mengapa saya tidak memikirkannya, meskipun kami menggunakan teknik yang sama untuk pemusatan vertikal sepanjang waktu ... Terima kasih, Anda menghemat banyak waktu.

Aayush

Answer 4

1

bagaimana jika pengguna telah menggulir vertikal ke bawah div muncul di bagian atas halaman sementara itu seharusnya muncul di area yang terlihat

PUG

Answer 5

Saya menampilkan thumbnail dari gambar yang diubah ukurannya secara dinamis di div overlay saya, jadi saya tidak tahu lebarnya.

PUG

Answer 6

4

ini hanya solusi, stackoverflow.com/questions/1776915/… tampaknya menjadi solusinya

PUG

Answer 7

1

Ini bukanlah jawaban yang benar. Jenis media yang berbeda tidak akan mendukung cuplikan ini.

Sushan

Answer 8

97

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

Matheus Oliveira
sumber

3

Bagaimana cara kerjanya? Bisakah Anda menjelaskan mengapa jawaban Anda valid?

afuzzyllama

1

Saya sangat menyukai metode ini daripada yang lain 99% dari waktu, Anda tidak perlu berurusan dengan padding, border, dll. Saya tidak pernah melihat ini gagal, lain kali berikan contoh jika gagal untuk Anda.

Dan

1

Hal yang keren tentang solusi ini adalah ia bekerja dengan persen juga, hanya saja tidak yakin apakah itu kompatibel lintas-browser

maljukan

1

Wow. Saya tidak berharap ini berhasil tetapi itu berhasil bagi saya seperti pesona

Awais Umar

4

Saya setuju bahwa ini harus menjadi jawaban yang benar, margin -200px menjerit kembali kepada saya.

Mani5556

Answer 9

3

Bagaimana cara kerjanya? Bisakah Anda menjelaskan mengapa jawaban Anda valid?

afuzzyllama

Answer 10

1

Saya sangat menyukai metode ini daripada yang lain 99% dari waktu, Anda tidak perlu berurusan dengan padding, border, dll. Saya tidak pernah melihat ini gagal, lain kali berikan contoh jika gagal untuk Anda.

Dan

Answer 11

1

Hal yang keren tentang solusi ini adalah ia bekerja dengan persen juga, hanya saja tidak yakin apakah itu kompatibel lintas-browser

maljukan

Answer 12

1

Wow. Saya tidak berharap ini berhasil tetapi itu berhasil bagi saya seperti pesona

Awais Umar

Answer 13

4

Saya setuju bahwa ini harus menjadi jawaban yang benar, margin -200px menjerit kembali kepada saya.

Mani5556

Answer 14

36

Saya tahu saya terlambat ke pesta, tetapi saya pikir saya akan memberikan jawaban di sini untuk orang-orang yang perlu memposisikan item absolut secara horizontal, ketika Anda tidak tahu lebarnya secara tepat.

Coba ini:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Teknik yang sama juga dapat diterapkan, saat Anda mungkin membutuhkan perataan vertikal, cukup dengan menyesuaikan properti seperti ini:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Michael Giovanni Pumo
sumber

1

Apaa. Ini luar biasa! Bisakah Anda menjelaskan cara kerjanya? Sunting: Melakukan beberapa perburuan dan sepertinya kiri: 50% memindahkan lokasi kiri div ke tengah, yang sebenarnya tidak tengah. Tapi translateX menggesernya kembali 50% dari lebar konten

Aziz Javed

2

Posisi absolut akan diposisikan dari kiri atas item. Menggunakan terjemahan akan menggesernya ke jumlah yang relatif terhadap ukurannya.

Michael Giovanni Pumo

3

Michael, hanya ingin Anda tahu, Anda tidak terlambat ke pesta bud ... dan bagi mereka yang tidak tahu: transform: translate (-50%, -50%); melakukan pemusatan vertikal dan horizontal dengan 1 baris

Marvel Moe

Answer 15

1