Bagaimana untuk memusatkan teks (mendatar dan menegak) di dalam blok div?

Question

Saya mempunyai div ditetapkan kepada paparkan:sekat (90px tinggi dan lebar), dan saya mempunyai beberapa teks di dalamnya.

我需要文本在垂直和水平方向上居中对齐。

Saya telah mencuba text-align:center, tetapi ia tidak melakukan bahagian tengah menegak, jadi saya mencuba vertical-align:middle, tetapi ia tidak berjaya.

有什么想法吗？

Answer 1

Teknologi yang biasa digunakan setakat 2014:

---

• Pendekatan 1 - transform translateX/translateY:

  Contoh di sini / Contoh skrin penuh

  Dalam pelayar yang disokong (kebanyakan daripadanya), anda boleh menggunakan top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) untuk memusatkan elemen secara menegak/mendatar secara dinamik.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

---

• Kaedah 2 - Kaedah Flexbox:

  Contoh di sini / Contoh skrin penuh

  Dalam pelayar yang disokong, tetapkan display of the targeted element to flex and use align-items: center for vertical centering and justify-content: center untuk pemusatan mendatar Cuma jangan lupa tambahkan awalan vendor untuk sokongan penyemak imbas tambahan (lihat contoh).

  .

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

---

• Pendekatan 3 - table-cell/vertical-align: middle:

  Contoh di sini / Contoh skrin penuh

  Dalam sesetengah kes, anda perlu memastikan bahawa html/body element's height is set to 100%.

  Untuk penjajaran menegak, tetapkan elemen induk width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle.

  Untuk pemusatan mendatar, anda boleh sama ada menambah text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block aras.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

---

• Pendekatan 4 - Diposisikan secara mutlak 50% dari atas dengan anjakan:

  Contoh di sini / Contoh skrin penuh

  Pendekatan ini menganggap bahawa teks mempunyai ketinggian yang diketahui - dalam keadaan ini, 18px. Just absolutely position the element 50% from the top, relative to the parent element. Use a negative margin-top value that is half of the element's known height, in this case - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

---

• Pendekatan 5 - Kaedah line-height (Paling tidak fleksibel - tidak dicadangkan):

  Contoh di sini

  Dalam sesetengah kes, elemen induk akan mempunyai ketinggian tetap Untuk pemusatan menegak, anda hanya perlu menetapkan nilai line-height pada elemen anak sama dengan ketinggian tetap elemen induk.

  .

  Walaupun penyelesaian ini berfungsi dalam beberapa kes, perlu diingat bahawa ia tidak berfungsi apabila terdapat berbilang baris teks - seperti ini .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

---

Kaedah 4 dan 5 bukanlah yang paling boleh dipercayai. Pilih salah satu daripada 3 teratas.

Answer 2

Jika ia adalah satu baris teks dan/atau imej, ia mudah dilakukan. Hanya gunakan:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Itu sahaja. Jika ia boleh berbilang baris, ia lebih rumit sedikit. Tetapi ada penyelesaian di http://pmob.co.uk/. Cari "penjajaran menegak".

Memandangkan mereka cenderung untuk menggodam atau menambah div kompleks... Saya biasanya melakukannya menggunakan jadual dengan satu sel... untuk memastikannya semudah mungkin.

---

Kemas kini 2020:

Melainkan anda perlu menjadikannya berfungsi pada penyemak imbas terdahulu seperti Internet Explorer 10, anda boleh menggunakan Flexbox. Ia disokong secara meluas oleh semua pelayar utama semasa . Pada asasnya, bekas itu perlu ditetapkan sebagai bekas fleksibel dan berpusat di sepanjang paksi utama dan silangnya:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Nyatakan lebar tetap untuk item kanak-kanak, dipanggil "item fleksibel":

#content {
  flex: 0 0 120px;
}

Contoh: http://jsfiddle.net/2woqsef1/1/

Untuk mengecilkan-membalut kandungan, ia lebih mudah lagi: cuma keluarkan garisan flex: ... daripada item flex, dan ia secara automatik dibalut.

Contoh: http://jsfiddle.net/2woqsef1/2/

Contoh di atas telah diuji pada pelayar utama termasuk MS Edge dan Internet Explorer 11.

Satu nota teknikal jika anda perlu menyesuaikannya: di dalam item flex, memandangkan item flex ini bukan bekas flex itu sendiri, cara CSS lama bukan flexbox berfungsi seperti yang diharapkan, bagaimanapun, jika anda menambah item flex tambahan bekas flex semasa, kedua-dua item flex akan diletakkan secara mendatar Untuk menjadikannya diletakkan secara menegak, tambahkan flex-direction: column; pada bekas flex Beginilah ia berfungsi antara bekas flex dan elemen segera..

Terdapat kaedah alternatif untuk melakukan pemusatan: dengan tidak menyatakan

pada item flex untuk mengambil semua ruang tambahan dalam keempat-empat arah, dan margin yang diagihkan sama rata akan menjadikan item flex berpusat pada semua arah ini berfungsi kecuali apabila ada adalah pelbagai item fleksibel Selain itu, teknik ini berfungsi pada MS Edge tetapi tidak pada Internet Explorer 11.center for the distribution on the main and cross axis for the flex container, but instead specify margin: auto

---

Kemas Kini 2016/2017:

Ia boleh dilakukan dengan lebih biasa dengan

, dan ia berfungsi dengan baik walaupun dalam pelayar lama seperti Internet Explorer 10 dan Internet Explorer 11. Ia boleh menyokong berbilang baris teks:transform

position: relative;
top: 50%;
transform: translateY(-50%);

Contoh:

https://jsfiddle.net/wb8u02kL/1/

Lebar lilit mengecut:

Penyelesaian di atas menggunakan lebar tetap untuk kawasan kandungan. Untuk menggunakan lebar shrinkwrap, gunakan

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Contoh:

https://jsfiddle.net/wb8u02kL/2/

Jika sokongan untuk Internet Explorer 10 diperlukan, maka flexbox tidak akan berfungsi dan kaedah di atas serta kaedah line-height akan berfungsi. Jika tidak, flexbox akan melakukan kerja itu.