Bagaimana cara menyelaraskan teks dalam div secara vertikal?

Saya mencoba menemukan cara paling efektif untuk menyelaraskan teks dengan div. Saya telah mencoba beberapa hal dan sepertinya tidak ada yang berhasil.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Pemusatan Vertikal di CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Ringkasan artikel:

Untuk browser CSS 2, seseorang dapat menggunakan display:table/ display:table-celluntuk memusatkan konten.

Sampel juga tersedia di JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Dimungkinkan untuk menggabungkan hacks untuk browser lama (Internet Explorer 6/7) menjadi gaya dengan menggunakan #untuk menyembunyikan gaya dari browser yang lebih baru:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Anda perlu menambahkan line-heightatribut dan atribut itu harus sesuai dengan ketinggian div. Dalam kasus Anda:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

Bahkan, Anda mungkin bisa menghapus height atributnya sekaligus.

Ini hanya bekerja untuk satu baris teks , jadi berhati-hatilah.

Ini sumber yang bagus

Dari http://howtocenterincss.com/ :

Berpusat di CSS adalah rasa sakit di pantat. Tampaknya ada trilyun cara untuk melakukannya, tergantung pada berbagai faktor. Ini menggabungkan mereka dan memberi Anda kode yang Anda butuhkan untuk setiap situasi.

Menggunakan Flexbox

Sejalan dengan menjaga agar posting ini tetap mutakhir dengan teknologi terbaru, berikut adalah cara yang jauh lebih mudah untuk memusatkan sesuatu menggunakan Flexbox. Flexbox tidak didukung di Internet Explorer 9 dan lebih rendah .

Berikut adalah beberapa sumber yang bagus:

• Panduan untuk Flexbox
• Elemen pemusatan dengan Flexbox
• Sintaks Internet Explorer 10 untuk Flexbox
• Dukungan untuk Flexbox

JSFiddle dengan awalan peramban

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Solusi lain

Ini dari zerosixthree dan memungkinkan Anda memusatkan apa pun dengan enam baris CSS

Metode ini tidak didukung di Internet Explorer 8 dan lebih rendah .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Jawaban sebelumnya

Pendekatan sederhana dan lintas-peramban, berguna karena tautan dalam jawaban yang ditandai sedikit usang.

Cara memusatkan teks secara vertikal dan horizontal dalam daftar yang tidak berurutan dan div tanpa menggunakan ketinggian garis JavaScript atau CSS . Tidak peduli berapa banyak teks yang Anda miliki, Anda tidak perlu menerapkan kelas khusus untuk daftar atau div tertentu (kode ini sama untuk masing-masing). Ini berfungsi pada semua browser utama termasuk Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera dan Safari. Ada dua lembar gaya khusus (satu untuk Internet Explorer 7 dan satu lagi untuk Internet Explorer 6) untuk membantu mereka karena keterbatasan CSS mereka yang tidak dimiliki browser modern.

Andy Howard - Cara memusatkan teks secara vertikal dan horizontal dalam daftar atau div yang tidak berurutan

Karena saya tidak terlalu peduli dengan Internet Explorer 7/6 untuk proyek terakhir yang saya kerjakan, saya menggunakan versi yang sedikit dipreteli (yaitu menghapus hal-hal yang membuatnya bekerja di Internet Explorer 7 dan 6). Mungkin bermanfaat untuk orang lain ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Mudah dengan display: flex. Dengan metode berikut, teks dalam divakan dipusatkan secara vertikal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Dan jika Anda mau, horisontal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Anda harus melihat versi peramban yang Anda butuhkan; di versi lama kode tidak berfungsi.

Saya menggunakan yang berikut ini untuk memusatkan elemen acak secara mudah:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Ini memusatkan teks di saya divke tengah vertikal tepat dari luar 200px-tinggi div. Perhatikan bahwa Anda mungkin perlu menggunakan awalan peramban (seperti-webkit- dalam kasus saya) untuk membuatnya berfungsi untuk peramban Anda.

Ini berfungsi tidak hanya untuk teks, tetapi juga untuk elemen lain.

Anda dapat melakukan ini dengan mengatur tampilan ke 'table-cell' dan menerapkan vertical-align: middle;:

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

Namun ini tidak didukung oleh semua versi Internet Explorer sesuai dengan kutipan ini yang saya salin dari http://www.w3schools.com/cssref/pr_class_display.asp tanpa izin.

catatan: Nilai-nilai "inline-table", "table", "table-caption", "table-cell", "tabel-kolom", "tabel-kolom-grup", "baris-tabel", "baris-tabel", "baris-tabel" -group ", dan" inherit "tidak didukung oleh Internet Explorer 7 dan sebelumnya. Internet Explorer 8 membutuhkan! DOCTYPE. Internet Explorer 9 mendukung nilai-nilai ini.

Tabel berikut menunjukkan nilai tampilan yang diizinkan juga dari http://www.w3schools.com/cssref/pr_class_display.asp .

Saat ini (kita tidak perlu Internet Explorer 6-7-8 lagi) Saya hanya akan menggunakan CSS display: tableuntuk masalah ini (atau display: flex).

Untuk browser lama:

Meja:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Melenturkan:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

Ini (sebenarnya, adalah) solusi favorit saya untuk masalah ini (browser yang sederhana dan didukung dengan sangat baik):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Coba ini, tambahkan pada div induk:

display: flex;
align-items: center;

Berikut adalah solusi yang paling sesuai untuk satu baris teks.

Ini juga dapat berfungsi untuk teks multi-baris dengan beberapa penyesuaian jika jumlah baris diketahui.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Ini JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Anda dapat menyelaraskan teks tengah secara vertikal di dalam div menggunakan Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

Anda dapat mempelajari lebih lanjut di A Complete Guide to Flexbox .

Periksa solusi sederhana ini:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Ada cara sederhana untuk menyelaraskan konten secara vertikal tanpa menggunakan tabel / sel-tabel:

http://jsfiddle.net/bBW5w/1/

Di dalamnya saya telah menambahkan div tidak terlihat (lebar = 0) yang mengasumsikan seluruh ketinggian wadah.

Tampaknya berfungsi di Internet Explorer dan Firefox (versi terbaru). Saya tidak memeriksa dengan browser lain

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

Dan tentu saja CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Ini adalah solusi terbersih yang saya temukan (Internet Explorer 9+) dan menambahkan perbaikan untuk masalah "mati oleh 0,5 piksel" dengan menggunakan transform-stylejawaban lain yang dihilangkan.

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

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

Sumber: Luruskan vertikal apa pun hanya dengan 3 baris CSS

Solusi sederhana untuk elemen yang tidak mengetahui nilai:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Menurut jawaban Adam Tomat disiapkan contoh JSFiddle untuk menyelaraskan teks dalam div :

<div class="cells-block">    
    text<br/>in the block   
</div>

dengan menggunakan display: flex dalam CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

dengan contoh lain dan beberapa penjelasan dalam posting blog .

Margin otomatis pada item-grid.

Mirip dengan Flexbox, menerapkan margin otomatis pada item-grid memusatkannya pada kedua sumbu:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexbox berfungsi dengan baik untuk saya, memusatkan banyak elemen di dalam induk div secara horizontal & vertikal.

Kode HTML:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-Code:
Kode di bawah ini menumpuk semua elemen di dalam parent-div dalam sebuah kolom, memusatkan elemen secara horizontal & vertikal. Saya menggunakan child-div untuk menjaga dua elemen Anchor pada baris (baris) yang sama. Tanpa child-div ketiga elemen (Anchor, Anchor & Paragraph) ditumpuk di dalam kolom parent-div di atas satu sama lain. Di sini hanya child-div yang ditumpuk di dalam kolom parent-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Menggunakan:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

Dengan trik ini, Anda dapat menyelaraskan apa pun jika Anda tidak ingin membuatnya tengah menambahkan "kiri: 0" untuk menyelaraskan ke kiri.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Menggunakan flex, berhati-hatilah dengan perbedaan rendering browser.

Ini berfungsi baik untuk Chrome dan Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Bandingkan dengan yang ini hanya bekerja dengan Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Ini adalah variasi lain dari divdalam divpola menggunakan calc()dalam CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Ini berfungsi, karena:

• position:absoluteuntuk penempatan yang tepat dari divdalam adiv
• kita tahu ketinggian batin divkarena kita mengaturnya 20px.
• calc(50% - 10px)untuk 50% - setengah tinggi untuk memusatkan batindiv

Ini berfungsi dengan baik:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Kelancangan

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Tanpa dan dengan tag gambar <mat-icon>(yang merupakan font).

Hmm, jelas ada banyak cara untuk menyelesaikan ini.

Tapi saya punya <div>posisi yang benar-benar, height:100%(sebenarnya, top:0;bottom:0dan lebar tetap) dan display:table-celltidak berfungsi untuk memusatkan teks secara vertikal. Solusi saya memang membutuhkan elemen bentang bagian dalam, tapi saya melihat banyak solusi lain juga, jadi saya mungkin menambahkannya:

Wadah saya adalah a .labeldan saya ingin angka berpusat vertikal di dalamnya. Saya melakukannya dengan benar-benar memposisikan top:50%dan pengaturanline-height:0

<div class="label"><span>1.</span></div>

Dan CSS-nya adalah sebagai berikut:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Lihat dalam aksi: http://jsfiddle.net/jcward/7gMLx/

Anda bisa menggunakan css flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Menggunakan kisi-kisi CSS melakukannya untuk saya:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Cobalah untuk menanamkan elemen tabel.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Ada beberapa trik untuk menampilkan konten atau gambar di tengah div. Beberapa jawaban benar-benar bagus dan saya sepenuhnya setuju dengan ini juga.

Absolute Horizontal And Vertical Centering Dalam CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Ada lebih dari 10 teknik dengan contoh . Sekarang terserah Anda yang Anda inginkan.

Tidak diragukan lagi, display:table; display:table-Cellini trik yang lebih baik.

Beberapa trik bagus adalah sebagai berikut:

Trik 1 - Dengan menggunakan display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

Kode CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Trik 2 - Dengan menggunakan display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Kode CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Trik 3 - Dengan menggunakan position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

Tambahkan kelas ini ke elemen yang berisi hal-hal yang ingin Anda selaraskan secara vertikal

Jika Anda perlu menggunakan dengan min-heightproperti Anda harus menambahkan CSS ini di:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}