Bagaimana cara menyelaraskan teks dalam div secara vertikal?


1185

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>





Jawaban:


782

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>


3
Tautan pertama lebih baik menurut saya walaupun terlihat rumit karena tautan kedua hanya menggunakan satu baris teks atau gambar yang Anda ketahui tingginya. Bagaimana jika Anda memiliki 2 atau 3 baris teks atau jika Anda tidak tahu ketinggian teks Anda, menyebabkannya bervariasi. Bagaimana cara kerjanya dengan ketinggian garis? Jadi ringkasnya. Saya menguji versi pertama dan berfungsi pada IE, Firefox DAN CHROME.
Raul

954
Saya tidak mengerti, mengapa kita harus menumbangkan hal ini? Ini abad ke-21! mengapa mereka tidak menyertakan satu opsi sialan untuk menyelaraskan teks sialan secara vertikal dalam css ... seperti: content-centering: keduanya atau secara vertikal atau horisontal. sungguh tidak dapat dipercaya bahwa teknologi yang digunakan selama bertahun-tahun begitu bodoh.
Alexander.Iljushkin

34
@Flextra: Inilah sebabnya orang masih menggunakan tabel untuk tata letak kotak. Perataan vertikal (atau apa pun dengan ketinggian & data dinamis) dapat menantang dengan CSS murni. Anda harus rela melakukan peretasan aneh seperti ini (agak mengalahkan gagasan "memisahkan konten dari tata letak"), atau menerima hit rendering multi-pass dan menggunakan tabel non-statis. Saya tidak pernah tablesekalipun memiliki keluhan dari pengguna akhir karena meskipun demikian saya secara rutin mematahkan hati para penggemar CSS. Sebagian besar dari mereka mendesain hanya blog sederhana & situs statis. Beberapa dari kita membangun perangkat lunak bisnis dan membutuhkan tampilan data yang padat, dan pengguna kita lebih peduli tentang fungsi.
nothingisnecessary

6
Ya. Jangan salah paham, jika saya membangun "situs" saya menggunakan lean html dan lebih memilih CSS murni, tapi saya tidak tahu berapa kali saya bergumul dengan berbaris berjam-jam, ketika saya hanya mengatakan 'F it' dan menggunakan table. Segalanya lebih baik sekarang, tetapi beberapa dari kita yang membuat aplikasi web bisnis harus mendukung browser yang lebih lama (IE6 masih digunakan di beberapa klien!), Sementara orang yang membuat blog dapat hidup di awan dan berpura-pura bahwa semua orang di dunia memiliki koneksi cepat, komputer baru, dan versi terbaru dari browser X dengan CSS 3, dll Contoh kasus: beberapa plugin Jira menggunakan tabel tunggal-baris untuk layout (atau melakukan pula)
nothingisnecessary

61
Sangat menggelikan bahwa tabel disukai karena semacam peretasan kuno yang hanya akan digunakan oleh pemula, dan di sini kita menggunakan "display: table-cell" dalam DIV sebagai solusi peretasan yang jauh.
Desty

744

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.


368
Saya percaya itu hanya valid jika Anda memiliki satu baris teks di div.
WEFX

49
Tentu saja, Anda akan memiliki spasi garis gila di teks Anda jika itu berjalan lebih dari 1 baris.
David

1
@ BobChatting, Ya itu. Lihat jawaban saya untuk solusi yang memungkinkan banyak baris teks.
Adam Tomat

2
garis-tinggi merambat ke setiap anak
KVM

4
tidak bekerja dengan persen: tinggi: 100%; line-height: 100%
albanx

477

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:

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>


2
Tidak masalah. Saya masih lebih suka menggunakan height: x; line-height: x;tetapi lebih sering daripada itu saya tidak perlu beberapa baris teks. Itu sebabnya saya suka solusi ini. Sederhana, dapat digunakan kembali, lintas-browser, tidak ada js dan hanya membutuhkan sedikit tambahan tanda.
Adam Tomat

Jika teks lebih besar dari kotak itu akan meluap. Saya telah mencoba berbagai cara untuk mencegah overflow tetapi semuanya tampaknya bertentangan dengan tampilan tabel dan sel-tabel. Segera setelah saya membatasi overflow, pemusatan vertikal berhenti berfungsi. jsfiddle.net/2HHLE Ada ide?
Thomas David Baker

Untuk menjawab pertanyaan saya sendiri jika Anda menempatkan div tabel / tabel-sel ke div lain dengan lebar tetap / tinggi dan melimpah: tersembunyi yang akan melakukan trik. Saya menulisnya di bluebones.net/2013/03/...
Thomas David Baker

2
@ThomasDavidBaker, solusi lain jika Anda ingin ini dinamis adalah mengatur ketinggian 100%. Ini jsfiddle , pada dasarnya hanya diubah height: 100px;menjadi height: 100%;untuk lidan untuk .outerContainer.
Adam Tomat

2
Tidak ingin menjadi nosepicker di sini tetapi di solusi kedua dari zerosixthree. Ada kesalahan ketik pada CSS di "- wekbit -transform: translateY (-50%);" Tetap saja, terima kasih banyak !! Solusi hebat!
Gnagy

186

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.


Singkat dan manis ... seharusnya melakukan sesuatu yang sangat sederhana. Bekerja pada IE 11, Chrome dan Firefox ... cukup baik untuk saya
splashout

Jawaban ini berfungsi dengan memposisikan teks di dalam objek asing di svg. Terima kasih!

1
Saya percaya: Flex adalah obat untuk semuanya!
DenisKolodin

1
text-align: centerdiperlukan juga, karena teks panjang mengisi lebar dan akan disejajarkan ke kiri
DenisKolodin

Saya selalu mengalami masalah dengan ini, dan saya benar-benar benci jawaban untuk meningkatkan ketinggian garis. Ini bekerja dengan sangat baik.
Jed Lynch

109

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.


3
Saya mendapat hasil yang lebih dapat diandalkan dengan position: absolute;- Terima kasih! NB Anda mungkin ingin memasukkan -ms-transformatau IE akan memasukkan sesuatu yang lain
Wilf

Plunker menyarankan untuk meletakkan -web-kit-transformsebelum transform. Mungkin menambahkan -ms-transformdapat menyelesaikan masalah @ ToniMichelCaubet.
sakovias

39

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 .

Masukkan deskripsi gambar di sini


2
Ide yang hebat! display: table-cell memiliki efek lain tetapi jika Anda baik-baik saja dengan mereka ini adalah solusi yang bagus
Brian Low

Juga penting untuk menambah ketinggian elemen.
Elan Perach

Sayangnya overflow: hidden tidak berfungsi pada tampilan: table-cell
TheJeff

32

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>


2
@Imray dia pada dasarnya menambahkan elemen inline-block lebar 0px di sebelah teks (pseudo: before). Namun, blok palsu ini memiliki tinggi 100%, yang merupakan trik. Karena blok dan teks memiliki v-sejajar, itu membuat sebagaimana dimaksud.
Dan H

1
jawaban terbaik, solusi bersih, didukung IE8
Rocco

Saat teks terbungkus, Anda dapat memiliki masalah dengan ini. Saya memperbaikinya dengan menambahkan berikut ini ke elemen bersarang: width: 95%; vertical-align: middle;
trgraglia

jika teks terlalu panjang, itu tidak berfungsi. apakah Anda punya solusi? jsfiddle.net/cyxuy95q
beta

Seperti yang disarankan dalam komentar sebelumnya kepada Anda, atur max-width 95% jsfiddle.net/cyxuy95q/1
Toni Michel Caubet

28

Coba ini, tambahkan pada div induk:

display: flex;
align-items: center;

1
Saya suka yang ini - Sederhana dan berfungsi di peramban modern
Casper Skovgaard

8

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 .


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

Bekerja seperti pesona saat meluruskan vertikal: tengah; dan sisanya gagal.
Chiwda

7

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 .


6

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

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

5

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


4

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%);
}

4

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 .


4

Margin otomatis pada item-grid.

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

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

4

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

3

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.


2

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

2

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>


1

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

1
Par

1

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).


0

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/


1
Bagus karena itu solusi paling sederhana. Kelemahannya hanya berfungsi untuk teks baris tunggal, lihat garpu contoh dengan teks yang lebih panjang. jsfiddle.net/6sWfw
Tomas Tintera

0

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>


0

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>


0

Cobalah untuk menanamkan elemen tabel.

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


6
Tabel hanya untuk berurusan dengan data tabular. Mereka seharusnya tidak pernah digunakan untuk memperbaiki masalah tata letak.
Micros

3
Yang menyenangkan tentang tabel, adalah selalu konsisten - CSS diartikan begitu banyak cara yang berbeda dan menempatkan DIV bersarang hanya untuk mendapatkan sesuatu yang sederhana dilakukan menambah HTML tambahan (dan kebingungan). CSS masih sangat cacat
MC9000

4
Ya, Sayangnya ini MASIH satu-satunya cara yang dapat diandalkan untuk menyelaraskan teks (tidak dikenal) secara vertikal dalam sebuah blok. Mengapa para dewa CSS sangat membenci valign? (SEMUA browser BISA melakukannya secara konsisten - tetapi hanya dalam sel tabel)
T4NK3R

-1

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&nbsp;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>

-2

CSS:

.vertical {
   display: table-caption;
}

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


-2

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

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.