Pertanyaan Bagaimana cara saya memusatkan teks secara vertikal dengan CSS?


Saya memiliki elemen div yang berisi teks, dan saya ingin menyelaraskan isi div ini secara vertikal pusat.

Inilah gaya div saya:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Apa cara terbaik untuk melakukan ini?


1804
2018-01-14 21:25


asal


Jawaban:


Anda dapat mencoba pendekatan dasar ini:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Ini hanya berfungsi untuk satu baris teks, karena kami menetapkan tinggi garis ke ketinggian yang sama dengan elemen kotak yang mengandung.


Pendekatan yang lebih fleksibel

Ini adalah cara lain untuk menyelaraskan teks secara vertikal. Solusi ini akan berfungsi untuk satu baris dan beberapa baris teks, tetapi masih membutuhkan kontainer dengan ketinggian tetap:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS hanya mengukur <div>, secara vertikal meluruskan pusat <span> dengan mengatur <div>garis-tinggi yang sama dengan tinggi, dan membuat <span> sebuah blok-inline dengan vertical-align: middle. Kemudian set line-height kembali normal untuk <span>, jadi isinya akan mengalir secara alami di dalam blok.


Mensimulasikan tampilan tabel

Dan di sini adalah opsi lain, yang mungkin tidak berfungsi pada yang lebih tua browser yang tidak mendukung display: table dan display: table-cell (pada dasarnya hanya Internet Explorer 7). Menggunakan CSS kami mensimulasikan perilaku tabel (karena tabel mendukung perataan vertikal), dan HTML sama dengan contoh kedua:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Menggunakan pemosisian mutlak

Teknik ini menggunakan pengaturan elemen benar-benar diposisikan atas, bawah, kiri dan kanan ke 0. Hal ini dijelaskan secara lebih rinci dalam sebuah artikel di Smashing Magazine, Pemetaan Horisontal dan Vertikal Mutlak Dalam CSS.


2447
2018-03-06 08:15



Cara lain (belum disebutkan di sini) adalah dengan Flexbox.

Cukup tambahkan kode berikut ke wadah elemen:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Demo Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Atau, alih-alih menyelaraskan konten melalui wadah, flexbox juga bisa memusatkan a item fleksibel dengan sebuah margin otomatis  ketika hanya ada satu item fleksibel dalam wadah fleksibel (seperti contoh yang diberikan dalam pertanyaan di atas).

Jadi untuk memusatkan item fleksibel baik secara horizontal maupun vertikal, atur saja margin:auto

Demo Flexbox 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Semua hal di atas berlaku untuk memusatkan item saat meletakkannya di baris horisontal. Ini juga merupakan perilaku default, karena secara default nilai untuk flex-direction aku s row. Jika, bagaimanapun flex-item perlu ditata kolom vertikal, kemudian flex-direction: column harus diatur pada wadah untuk mengatur sumbu utama sebagai kolom dan tambahan justify-content dan align-items properti sekarang berfungsi sebaliknya dengan justify-content: center berpusat secara vertikal dan align-items: center berpusat secara horizontal)

flex-direction: column demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Tempat yang baik untuk memulai dengan Flexbox untuk melihat beberapa fitur dan mendapatkan sintaks untuk dukungan browser maksimal flexyboxes 

Juga, dukungan browser saat ini sangat bagus: kaniuse

Untuk kompatibilitas antar-browser untuk display: flex dan align-items, Anda dapat menggunakan yang berikut:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

956
2018-01-14 21:29



Anda dapat dengan mudah melakukan ini dengan menambahkan potongan kode CSS berikut:

display: table-cell;
vertical-align: middle;

Itu berarti CSS Anda akhirnya terlihat seperti:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


109
2017-10-25 18:12



Untuk referensi dan menambahkan jawaban yang lebih sederhana:

CSS Murni:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Atau sebagai Mixin SASS / SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Digunakan oleh:

.class-to-center {
    @include vertical-align;
}

Oleh posting blog Sebastian Ekström Segarkan vertikal apa saja dengan hanya 3 baris CSS:

Metode ini dapat menyebabkan elemen menjadi buram karena elemen ditempatkan pada "setengah piksel". Solusi untuk ini adalah mengatur elemen induknya ke preserve-3d. Seperti berikut:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Kami tinggal di 2015+ dan Kotak Flex didukung oleh setiap browser modern utama.

Ini akan menjadi cara situs web dibuat pada keluar dari sini.

Pelajari itu!


97
2017-08-11 11:59



Semua kredit masuk ke pemilik tautan ini @Sebastian Ekström Link; tolong melalui ini. Melihatnya dalam aksi codepen. Dengan membaca artikel di atas saya juga membuat sebuah demo biola.

Dengan hanya tiga baris CSS (tidak termasuk awalan vendor) kita dapat melakukannya dengan bantuan transformasi: translateY secara vertikal memusatkan apa pun yang kita inginkan, bahkan jika kita tidak tahu tingginya.

Transformasi properti CSS biasanya digunakan untuk elemen berputar dan skala, tetapi dengan fungsi translateya kita sekarang dapat secara vertikal meluruskan elemen. Biasanya ini harus dilakukan dengan pemosisian absolut atau pengaturan ketinggian garis, tetapi ini mengharuskan Anda untuk mengetahui ketinggian elemen atau hanya bekerja pada teks satu baris, dll.

Jadi, untuk melakukan ini kita menulis:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Itu saja yang Anda butuhkan. Ini adalah teknik yang mirip dengan metode posisi absolut, tetapi dengan sisi atas bahwa kita tidak harus menetapkan tinggi pada elemen atau properti posisi pada induk. Ini bekerja langsung di luar kotak, bahkan di Internet Explorer 9!

Untuk membuatnya lebih sederhana, kita dapat menulisnya sebagai campuran dengan awalan vendornya.


49
2017-12-13 20:09



Flexbox yang diperkenalkan di CSS3 adalah solusinya:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Catatan: Ganti baris di atas yang ditandai sebagai penting dengan salah satu baris ini, jika Anda ingin memusatkan teks:

1) Hanya secara vertikal:

margin: auto 0;

2) Hanya secara horizontal:

margin: 0 auto;

MEMPERBARUI: Seperti yang saya perhatikan, trik ini berfungsi dengan grid (display: grid), juga.


22
2017-08-28 10:11



Pendekatan yang fleksibel

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26



Solusinya diterima sebagai jawaban yang sempurna untuk digunakan line-height sama dengan tinggi div, tetapi solusi ini tidak bekerja dengan sempurna ketika teks dibungkus ATAU dalam dua baris.

Coba yang ini jika teks dibungkus atau ada di beberapa baris di dalam div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Untuk referensi lebih lanjut, lihat:


13
2018-04-15 08:28



Anda juga dapat menggunakan properti di bawah ini.

display: flex; 
align-content: center; 
justify-content : center;

9
2017-12-01 18:06



Mencoba solusi ini:

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Dibangun menggunakan CSS +.


9
2018-05-28 07:41