Saya memiliki sebuah elemen div yang berisi teks, dan saya ingin menyelaraskan isi dari div vertikal pusat.
Di sini saya div style:
#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 hal ini?
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 bekerja untuk satu baris teks meskipun, karena kami menetapkan garis's ketinggian ke ketinggian yang sama sebagai kotak yang berisi elemen.
Ini adalah cara lain untuk menyelaraskan teks secara vertikal. Solusi ini akan bekerja untuk satu baris dan beberapa baris teks, tetapi masih memerlukan tinggi tetap kontainer:
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 ukuran <div>
, vertikal pusat sejalan <span>
dengan menetapkan <div>
's line-height sama dengan tingginya, dan membuat <span>
inline-block dengan vertical-align: middle
. Kemudian ia menetapkan line-height kembali normal untuk <span>
, sehingga isinya akan mengalir secara alami di dalam blok.
Dan berikut adalah pilihan lain yang mungkin tidak bekerja pada yang lebih tua browser yang don't dukungan display: table
dan display: table-cell
(pada dasarnya hanya Internet Explorer 7). Dengan menggunakan CSS kita mensimulasikan tabel perilaku (karena tabel mendukung keselarasan vertikal), dan HTML adalah sama seperti 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>
Teknik ini menggunakan aplikasi yang benar-benar diposisikan elemen pengaturan atas, bawah, kiri dan kanan untuk 0. Hal ini dijelaskan secara lebih detail dalam sebuah artikel di Smashing Magazine, Absolute Centering Horisontal Dan Vertikal Dalam CSS.
Cara lain (tidak disebutkan di sini belum) adalah dengan Flexbox.
Hanya menambahkan kode berikut ke wadah elemen:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
.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 dapat pusat a flex item dengan auto margin ketika hanya ada satu flex-item dalam wadah flex (seperti contoh yang diberikan pada pertanyaan di atas).
Jadi untuk pusat flex item baik secara horizontal maupun vertikal hanya mengatur hal ini dengan margin:auto
.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 di atas berlaku untuk centering item sambil meletakkan mereka di baris horisontal. Ini adalah perilaku default, karena secara default nilai untuk flex-arah
adalah row
. Jika, namun flex-item yang perlu diletakkan dalam kolom vertikal, kemudian flex-arah: kolom
harus ditetapkan pada wadah untuk mengatur utama-axis sebagai kolom dan selain itu membenarkan-content
dan menyelaraskan-barang
properties sekarang bekerja cara lain di sekitar dengan membenarkan-content: center
berpusat vertikal dan menyelaraskan item: center
horizontal centering)
flex-arah: kolom
demo][5].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 maksimum browser dukungan flexyboxes
Juga, dukungan browser yang saat ini sangat baik: caniuse
Untuk kompatibilitas cross-browser untuk display: flex
dan menyelaraskan-barang
, anda dapat menggunakan 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;
Anda dapat dengan mudah melakukan ini dengan menambahkan potongan berikut kode CSS:
display: table-cell;
vertical-align: middle;
Itu berarti CSS anda akhirnya tampak 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>
Untuk referensi dan untuk menambahkan lebih sederhana menjawab:
Pure CSS:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Atau sebagai SASS/SCSS Mixin:
@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 Sebastian Ekström's blog post menyelaraskan Vertikal apa-apa dengan hanya 3 baris CSS:
Metode ini dapat menyebabkan unsur-unsur untuk menjadi kabur karena elemen yang ditempatkan pada "setengah pixel". Solusi untuk ini adalah untuk mengatur elemen induk untuk melestarikan-3d. Seperti berikut:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Kita hidup di 2015+ dan Flex Box ini didukung oleh sejumlah besar browser modern.
Itu akan menjadi cara situs-situs yang dibuat pada keluar dari sini.
Belajar it!
Semua kredit pergi ke link ini pemilik @Sebastian Ekström Link; silakan pergi melalui ini. Melihatnya dalam tindakan codepen. Dengan membaca artikel di atas saya juga dibuat [demo biola][3].
Dengan hanya tiga baris CSS (tidak termasuk vendor prefix) kita bisa melakukannya dengan bantuan transform: translateY vertikal pusat apapun yang kita inginkan, bahkan jika kita tidak tahu yang tinggi.
CSS properti transform biasanya digunakan untuk berputar dan scaling unsur-unsur, tetapi dengan translateY fungsi kita sekarang dapat secara vertikal menyelaraskan unsur-unsur. Biasanya hal ini harus dilakukan dengan posisi absolut atau menetapkan garis-tinggi, tapi ini mengharuskan anda untuk mengetahui ketinggian elemen atau hanya bekerja pada satu baris teks, dll.
Jadi, untuk melakukan ini, kita tulis:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Itu semua yang anda butuhkan. Ini adalah teknik yang sama dengan absolute-posisi metode, tetapi dengan terbalik bahwa kita tidak perlu mengatur ketinggian pada elemen atau posisi-properti pada orang tua. Ia bekerja langsung dari kotak, bahkan di Internet Explorer 9!
Untuk membuatnya lebih sederhana, kita dapat menuliskannya sebagai mixin dengan awalan vendor.
Flexboxes yang diperkenalkan pada CSS3 adalah solusinya:
/* Important */
section {
display: flex;
display: -webkit-flex;
}
p {
/* Key Part */
margin: auto;
}
/* Unimportant, coloring and UI */
section {
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 3px solid orange;
background-color: gold;
}
p {
text-align: center;
font-family: Calibri;
background-color: yellow;
border-radius: 20px;
padding: 15px;
}
<section>
<p>
I'm a centered box!<br/>
Flexboxes are great!
</p>
</section>
Tips: Ganti baris di atas yang ditandai sebagai "Bagian Penting" dengan salah satu dari garis-garis ini, jika anda ingin ke pusat teks:
margin: auto 0;
margin: 0 auto;
Seperti yang saya perhatikan, trik ini bekerja dengan grid (yaitu tampilan: grid
), juga.
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>
Solusi yang diterima sebagai jawaban sempurna untuk menggunakan line-height
sama seperti ketinggian div, tapi solusi ini tidak bekerja dengan sempurna ketika teks dibungkus ATAU dalam dua baris.
Coba yang satu ini jika teks dibungkus atau di beberapa garis di dalam div.
#box
{
display: table-cell;
vertical-align: middle;
}
Untuk referensi, lihat:
Mencoba solusi:
.EXTENDER { position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; tinggi: 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+.
Anda dapat menggunakan potongan kode berikut sebagai acuan. Itu bekerja seperti pesona untuk saya:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vertically Center Text</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.centered-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body style="background:#3cedd5">
<div class="centered-text">
<h1>Yes, it's my landing page</h1>
<h2>Under construction, coming soon!!!</h2>
</div>
</body>
</html>
Output dari potongan kode di atas adalah sebagai berikut:
Cara lain:
Don't mengatur tinggi
atribut div
, tapi bukan menggunakan padding:
untuk mencapai efek. Demikian pula untuk line-height, ini hanya bekerja jika anda memiliki salah satu baris teks. Meskipun cara ini, jika anda memiliki lebih banyak konten, teks masih akan berpusat, tapi div itu sendiri akan menjadi sedikit lebih besar.
Jadi bukannya pergi dengan:
div {
height: 120px;
line-height: 120px;
}
Anda bisa mengatakan:
div {
padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
Ini akan mengatur bagian atas dan bawah padding
dari div
untuk 60px
, dan kiri dan kanan padding
ke nol, membuat div
120 piksel (ditambah ketinggian font anda) tinggi, dan menempatkan teks di tengah secara vertikal di div.
Berikut adalah pilihan lain menggunakan flexbox.
<div id="container">
<div class="child">
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
nemo.</span
>
</div>
</div>
#container {
display: flex;
}
.child {
margin: auto;
}
I'm tidak yakin siapa pun yang telah pergi tulisan-mode
rute, tapi saya pikir itu memecahkan masalah yang bersih dan memiliki dukungan luas:
<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>
.vertical {
//border: 1px solid green;
writing-mode: vertical-lr;
text-align: center;
height: 100%;
width: 100%;
}
.horizontal {
//border: 1px solid blue;
display: inline-block;
writing-mode: horizontal-tb;
width: 100%;
text-align: center;
}
.content {
text-align: left;
display: inline-block;
border: 1px solid #e0e0e0;
padding: .5em 1em;
border-radius: 1em;
}
Ini akan, tentu saja, bekerja dengan dimensi yang anda butuhkan (selain 100% dari orang tua). Jika anda tanda garis-garis perbatasan, it'akan membantu untuk membiasakan diri.
[Demo JSFiddle][1] bagi anda untuk bermain-main.
Caniuse dukungan: 85.22% + 6.26% = 91.48% (bahkan Internet Explorer!)
Bahkan ide yang lebih baik untuk ini. Anda bisa melakukan seperti ini juga
body,
html {
height: 100%;
}
.parent {
white-space: nowrap;
height: 100%;
text-align: center;
}
.parent:after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.centered {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="parent">
<div class="centered">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
Untuk semua vertikal keselarasan kebutuhan!
Menyatakan Mixin ini:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Kemudian memasukkannya ke dalam elemen anda:
.element{
@include vertical-align();
}
Untuk satu baris teks (atau karakter tunggal) anda dapat menggunakan teknik ini:
Itu bisa dapat digunakan ketika #kotak
telah non-tetap, relatif tinggi dalam %.
<div id="kotak"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Lihat live demo di JsBin (lebih mudah untuk mengedit CSS) atau [JsFiddle][2] (lebih mudah untuk mengubah tinggi dari hasil frame).
Jika anda ingin menempatkan dalam teks di HTML, bukan di CSS, maka anda perlu untuk membungkus isi teks dalam tambahan inline elemen dan edit #kotak::setelah
untuk pertandingan itu. (Dan, tentu saja, content:
properti harus dihapus.)
Misalnya,
<div id="kotak"><span>TextContent</span></div>
.
Dalam hal ini, #kotak::setelah
harus diganti dengan #kotak span
.
Untuk Internet Explorer 8 mendukung anda harus mengganti ::
dengan :
.
Sederhana dan serbaguna adalah (seperti Michielvoo's tabel pendekatan):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
Menggunakan atribut ini (atau yang setara kelas) pada orang tua tag bekerja bahkan bagi banyak anak-anak untuk menyelaraskan:
<parent ctrv> <ch1/> <ch2/> </parent>
Yang sangat sederhana & paling ampuh solusi untuk vertikal align center:
.outer-div {
height: 200px;
width: 200px;
text-align: center;
border: 1px solid #000;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
}
<div class="outer-div">
<span class="inner">No data available</span>
</div>