Bagaimana untuk menyelaraskan <div> ke tengah (horizontal/lebar) dari halaman

Saya memiliki div tag dengan lebar set untuk 800 piksel. Ketika browser lebar lebih besar dari 800 piksel, seharusnya't meregangkan div, tetapi harus membawanya ke tengah-tengah halaman.

Peter Mortensen
Pertanyaan edit 24 Maret 2019 в 10:51
Pemrograman
html css center alignment
5 Juni 2009 в 1:44
42 tayangan
Larutan

    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
Komentar (10)

posisi: absolut dan kemudian top:50% dan left:50% tempat-tempat di tepi atas di bagian vertikal tengah layar, dan tepi kiri di tengah horizontal, maka dengan menambahkan margin-top negatif dari ketinggian div, yaitu -100 pergeseran itu di atas dengan 100 dan demikian pula untuk margin-left. Ini mendapat div persis di tengah halaman.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>
Peter Mortensen
Jawaban edit 24 Maret 2019 в 11:04
Komentar (6)

Modern Flexbox solusi adalah cara untuk pergi di/dari 2015. membenarkan-content: center digunakan untuk elemen induk untuk menyelaraskan konten ke pusat itu.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

Output

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>
Manoj Kumar
Jawaban edit 25 Juni 2019 в 1:34
Komentar (0)

  1. Apakah anda berarti bahwa anda ingin ke pusat itu vertikal atau horizontal? Anda mengatakan anda tentukan tinggi untuk 800 piksel, dan ingin div bukan untuk meregangkan ketika lebar adalah lebih besar dari yang...

  2. Untuk pusat horizontal, anda dapat menggunakan margin: auto; atribut pada CSS. Juga, anda'll harus memastikan bahwa tubuh dan html elemen don't memiliki margin atau padding:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
Komentar (0)

Untuk membuat hal ini juga bekerja dengan benar di Internet Explorer 6 yang harus anda lakukan sebagai berikut:

HTML


    <div class="centered">
        centered content
    </div>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
Komentar (1)
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
Komentar (2)

Anda juga dapat menggunakannya seperti ini:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>
Komentar (1)

Hal ini dapat dengan mudah dicapai melalui wadah flex.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

Preview Link

Komentar (0)

Hanya menggunakan center tag hanya setelah tubuh tag, dan akhirnya center tag sebelum tubuh berakhir:



        ... Your code here ...

Ini bekerja untuk saya dengan semua browser saya telah mencoba.

Komentar (5)

Div berpusat secara vertikal dan horizontal di dalam satu induk tanpa memperbaiki isi ukuran

Di sini pada halaman ini adalah gambaran yang baik dengan beberapa solusi, terlalu banyak kode untuk berbagi di sini, tapi itu menunjukkan apa yang mungkin...

Secara pribadi saya suka solusi yang terkenal dengan mengubah menerjemahkan -50% trik yang paling. Ia bekerja dengan baik untuk investasi tetap (% atau px) dan terdefinisi tinggi dan lebar dari elemen anda.
Kode sederhana seperti:

HTML:

<div class="center"><div>

CSS:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */

  /* optional size in px or %: */
  width: 100px;
  height: 100px;
}

[Di sini biola][3] yang menunjukkan bahwa ia bekerja

Wilt
Jawaban edit 1 Mei 2019 в 6:42
Komentar (3)

Menambahkan kelas ini untuk div yang anda inginkan terpusat (yang harus memiliki lebar set):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

Atau, tambahkan margin hal-hal untuk anda div kelas, seperti ini:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}
Komentar (3)

Gunakan CSS flex properti: http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* Centered */
  display: box;
  flex-align: center;
  flex-pack: center;
}
Peter Mortensen
Jawaban edit 24 Maret 2019 в 11:05
Komentar (2)

Beberapa lainnya sudah ada setup dari tua kode yang akan mencegah div halaman berpusat L&R adalah:

  1. Kelas-kelas lain yang tersembunyi di eksternal stylesheet link.
  2. Kelas-kelas lain yang tertanam dalam sesuatu seperti img (seperti untuk anak eksternal CSS cetak format kontrol).
  3. Legenda kode dengan Id dan/atau KELAS akan konflik dengan seorang yang bernama div kelas.
Peter Mortensen
Jawaban edit 24 Maret 2019 в 11:02
Komentar (0)

Berpusat tanpa menentukan div lebar:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

Ini adalah sesuatu seperti <center> tag tidak, kecuali:

  • semua langsung inline anak-anaknya unsur-unsur (misalnya. <h1>) dari <center> juga akan diposisikan untuk pusat
  • inline-block unsur dapat memiliki ukuran berbeda (dibanding penurunan display:block setting) sesuai dengan browser default
Komentar (0)

Jika anda memiliki beberapa konten biasa, dan tidak hanya satu baris teks, satu-satunya alasan yang mungkin saya tahu adalah untuk menghitung margin.

Berikut ini sebuah contoh:

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

Jadi, #supercontainer adalah "seluruh halaman" dan lebar adalah 1200px.

#middlecontainer adalah div dengan konten situs anda; itu's lebar 102px. Dalam kasus lebar konten dikenal, anda perlu untuk membagi halaman's ukuran untuk 2, dan mengurangi setengah dari isi's lebar dari hasil: 1200 / 2 - (102 / 2) = 549;

Ya, aku'm juga melihat bahwa ini adalah der grosse gagal CSS.

Komentar (0)

Gunakan membenarkan-content dan menyelaraskan-barang untuk horizontal dan vertikal menyelaraskan div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}
<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>
Komentar (0)
 
body, html {
    display: table;
    height: 100%;
    width: 100%;
}
.container {
    display: table-cell;
    vertical-align: middle;
}
.container .box {
    width: 100px;
    height: 100px;
    background: red;
    margin: 0 auto;
}

http://jsfiddle.net/NPV2E/

"width:100%;" untuk "body" tag ini hanya untuk contoh. Dalam proyek nyata anda dapat menghapus properti ini.

Peter Mortensen
Jawaban edit 24 Maret 2019 в 11:08
Komentar (1)

Sederhana http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}
Komentar (0)

Ini juga bekerja di Internet Explorer, tapi auto margin tidak.

.centered {
    position: absolute;
    display:  inline-block;
    left:     -500px;
    width:    1000px;
    margin:   0 50%;
}
Komentar (1)

Gunakan kode di bawah ini untuk centering div box:

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}
<div class="box-content">
</div>
Komentar (0)