Pertanyaan Bagaimana cara menyesuaikan teks secara vertikal dalam div?


Saya mencoba mencari 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>


856
2018-05-30 19:02


asal


Jawaban:


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

Ringkasan artikel:

Untuk browser CSS2 yang bisa digunakan display:table/display:table-cell untuk 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>

Anda dapat menggabungkan peretasan untuk peramban lama (IE6 / 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>


627
2018-05-30 19:29



Anda perlu menambahkan line-height atribut dan atribut tersebut harus sesuai dengan tinggi 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 atribut sama sekali.

Ini hanya berfungsi satu baris teks jadi berhati-hatilah.


608
2018-02-06 19:21



Perbarui - Berikut adalah sumber daya yang bagus

http://howtocenterincss.com/

Pemusatan dalam CSS adalah rasa sakit di pantat. Sepertinya ada trilyunan cara untuk melakukannya, tergantung pada berbagai faktor. Ini menggabungkan mereka dan memberi Anda kode yang Anda butuhkan untuk setiap situasi.

Perbarui - Menggunakan Flexbox

Sejalan dengan menjaga agar postingan ini selalu diperbarui dengan teknologi terbaru, inilah cara yang lebih mudah untuk memusatkan sesuatu menggunakan flexbox. Flexbox tidak didukung di IE9 and lower.

Berikut beberapa sumber daya hebat:

jsfiddle dengan awalan browser

HTML

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

CSS

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

Perbarui - Solusi lain

Ini dari zerosixthree dan memungkinkan Anda memusatkan apa pun dengan 6 baris css

Metode ini tidak didukung di IE8 and lower

jsfiddle

HTML

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

CSS

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

Jawaban sebelumnya

Pendekatan peramban sederhana dan lintas, berguna sebagai tautan dalam jawaban yang ditandai sedikit kedaluwarsa.

Bagaimana teks pusat vertikal dan horizontal di kedua daftar unordered dan div tanpa beralih ke JavaScript atau ketinggian garis css. Tidak peduli berapa banyak teks yang Anda miliki Anda tidak perlu menerapkan kelas khusus ke daftar atau div tertentu (kode ini sama untuk masing-masing). Ini berfungsi di semua browser utama termasuk IE9, IE8, IE7, IE6, Firefox, Chrome, Opera, dan Safari. Ada 2 stylesheet khusus (1 untuk IE7 dan lainnya untuk IE6) untuk membantu mereka karena keterbatasan css yang tidak dimiliki browser modern.

Andy Howard - Bagaimana teks pusat vertikal dan horizontal dalam daftar atau div yang tidak berurutan

Edit: Karena saya tidak terlalu peduli dengan IE7 / 6 untuk proyek terakhir yang saya kerjakan, saya menggunakan versi yang sedikit dilucuti (yaitu menghapus hal-hal yang membuatnya berfungsi di IE7 dan 6). Mungkin berguna untuk orang lain ...

jsfiddle

HTML

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

Dan CSS:

.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;
}

352
2017-11-22 15:18



Sangat mudah dengan display: flex. Dengan metode berikut, teks di div akan berpusat 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 browser yang Anda butuhkan; di versi lama kode tidak berfungsi.


119
2017-12-12 20:25



Saya menggunakan hal-hal berikut ini kepada elemen-elemen acak pusat vertikal dengan 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 div ke tengah vertikal tepat dari luar 200px-tinggi div. Perhatikan bahwa Anda mungkin perlu menggunakan awalan browser (seperti -webkit- dalam kasus saya) untuk membuat ini berfungsi untuk browser Anda.

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


104
2018-01-24 14:11



Anda dapat melakukan ini dengan mengatur tampilan ke 'tabel-sel' 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 http://www.w3schools.com/cssref/pr_class_display.asp tanpa izin.

catatan: Nilai-nilai "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group ", dan" mewarisi "tidak didukung oleh IE7 dan sebelumnya. IE8 membutuhkan DOCTYPE. IE9 mendukung nilainya.

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

enter image description here


35
2018-04-18 15:15



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

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

.vcenter{
    background:#eee;
    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">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   


17
2017-09-15 17:54



Berikut ini solusi yang paling cocok untuk satu baris teks.

Ini juga dapat berfungsi untuk teks multi-garis dengan beberapa tweaking 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


7
2017-10-08 06:50



<!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>

7
2018-03-17 05:07



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


5
2018-06-07 08:14



Ada cara yang lebih sederhana untuk menyelaraskan konten secara vertikal tanpa beralih ke tabel / tabel-sel:

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

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

Tampaknya berfungsi di IE dan FF (versi terbaru), tidak diperiksa 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%;    
}

4
2018-05-25 20:42