Saya mencoba untuk menemukan cara yang paling efektif untuk menyelaraskan teks dengan div. Saya telah mencoba beberapa hal dan tidak ada tampaknya bekerja.
.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>
Vertikal Berpusat di CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Ringkasan artikel:
Untuk CSS 2 browser, kita dapat menggunakan display:table
/display:table-cell
untuk konten pusat.
Sampel ini 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>
Hal ini dimungkinkan untuk menggabungkan hacks untuk browser lama (Internet Explorer 6/7) ke 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-height
atribut dan atribut tersebut harus sesuai dengan ketinggian div
. Dalam kasus anda:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
Pada kenyataannya, anda mungkin bisa menghapus tinggi
atribut sama sekali.
Ini hanya bekerja untuk satu baris teks meskipun, jadi hati-hati.
Dari http://howtocenterincss.com/:
Berpusat di CSS adalah rasa sakit di pantat. Tampaknya ada trilyun cara untuk melakukannya, tergantung pada berbagai faktor. Ini mengkonsolidasikan mereka dan memberikan anda kode yang anda butuhkan untuk setiap situasi.
Seiring dengan menjaga posting ini up-to-date dengan teknologi terbaru, berikut ini's cara yang lebih mudah untuk center sesuatu menggunakan Flexbox. Flexbox isn't didukung di Internet Explorer 9 dan bawah.
Berikut ini adalah beberapa sumber daya yang besar:
[JSFiddle dengan prefiks browser][5]
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>
Ini adalah dari zerosixthree dan memungkinkan anda center apa-apa dengan enam baris CSS
Metode ini isn't didukung di Internet Explorer 8 dan bawah.
[jsfiddle][7]
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>
Sederhana dan cross-browser pendekatan, yang berguna sebagai link dalam menandai jawaban yang sedikit usang.
Bagaimana untuk secara vertikal dan horizontal center teks di kedua daftar unordered dan div tanpa menggunakan JavaScript atau CSS garis ketinggian. Tidak peduli berapa banyak teks yang anda miliki, anda tidak't harus menerapkan setiap kelas khusus untuk daftar spesifik atau div (kode adalah sama untuk masing-masing). Ini bekerja pada semua browser utama, termasuk Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera dan Safari. Ada dua khusus stylesheet (satu untuk Internet Explorer 7 dan yang lain untuk Internet Explorer 6) untuk membantu mereka bersama karena mereka CSS keterbatasan yang modern browser don't memiliki.
Seperti yang saya didn't peduli banyak untuk Internet Explorer 7/6 untuk terakhir proyek yang saya kerjakan, saya menggunakan sedikit versi dipreteli (yaitu menghapus hal-hal yang membuatnya bekerja di Internet Explorer 7 dan 6). Hal ini mungkin berguna untuk orang lain...
[JSFiddle][10]
.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>
Hal ini mudah dengan display: flex
. Dengan metode berikut, teks dalam div
akan 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 ingin, horizontal:
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 lihat versi browser yang anda butuhkan; di old versions kode tidak bekerja.
Saya menggunakan berikut untuk vertikal pusat unsur-unsur acak dengan mudah:
<div style="height: 200px">
<div id="mytext">This is vertically aligned text within a div</div>
</div>
#mytext {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Ini pusat teks di div
tepat vertikal tengah 200px-tinggi luar div
. Perhatikan bahwa anda mungkin perlu untuk menggunakan browser awalan (seperti -webkit-
dalam kasus saya) untuk membuat ini bekerja untuk browser anda.
Ini bekerja tidak hanya teks, tetapi juga untuk unsur-unsur lain.
Anda dapat melakukan ini dengan pengaturan tampilan 'table-cell' dan menerapkan vertical-align: middle;
:
{
display: table-cell;
vertical-align: middle;
}
Namun ini tidak didukung oleh semua versi Internet Explorer menurut kutipan ini saya disalin dari http://www.w3schools.com/cssref/pr_class_display.asp tanpa izin.
Catatan: nilai "inline-table", "table", "meja-caption", "table-cell", "tabel-kolom", "tabel-kolom-kelompok", "table-row", "table-row-kelompok", dan "mewarisi" tidak didukung oleh Internet Explorer 7 dan sebelumnya. Internet Explorer 8 membutuhkan !DOCTYPE. Internet Explorer 9 mendukung nilai-nilai.
Tabel berikut menunjukkan diperbolehkan menampilkan nilai-nilai juga dari http://www.w3schools.com/cssref/pr_class_display.asp.
Hari ini (kita don't perlu Internet Explorer 6-7-8 lagi) saya hanya akan menggunakan CSS display: table
untuk masalah ini (atau display: flex
).
Tabel:
.vcenter {
display: table;
background: #eee; /* optional */
width: 150px;
height: 150px;
text-align: center; /* optional */
}
.vcenter > :first-child {
display: table-cell;
vertical-align: middle;
}
Ini adalah Teks
Flex:
.vcenter {
display: flex; /* <-- Here */
align-items: center; /* <-- Here */
justify-content: center; /* optional */
height: 150px; /* <-- Here */
background: #eee; /* optional */
width: 150px;
}
Ini adalah teks
Ini adalah (sebenarnya, itu) favorit saya solusi untuk masalah ini (sederhana dan sangat baik browser yang didukung):
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>
Berikut ini adalah solusi yang terbaik untuk satu baris teks.
Hal ini juga dapat bekerja untuk multi-dilapisi teks dengan beberapa tweaking jika jumlah garis yang 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 */
}
[Berikut ini adalah JSFiddle][1].
<!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 pusat teks secara vertikal di dalam sebuah div dengan menggunakan Flexbox.
<div>
<p class="testimonialText">This is the testimonial text.</p>
</div>
div {
display: flex;
align-items: center;
}
Anda dapat mempelajari lebih lanjut tentang hal itu di Panduan Lengkap untuk Flexbox.
Memeriksa solusi sederhana ini:
<div class="block-title"><h3>I'm a vertically centered element</h3></div>
.block-title {
float: left;
display: block;
width: 100%;
height: 88px
}
.block-title h3 {
display: table-cell;
vertical-align: middle;
height: inherit
}
[JSFiddle][1]
Ada's cara yang lebih sederhana untuk secara vertikal menyelaraskan konten tanpa menggunakan tabel/tabel-sel:
Dalam hal ini saya telah menambahkan tak terlihat (lebar=0) div mengasumsikan bahwa seluruh ketinggian dari wadah.
Tampaknya untuk bekerja di Internet Explorer dan Firefox (versi terbaru). Aku't check 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 terbersih solusi saya telah menemukan (Internet Explorer 9+) dan menambahkan untuk memperbaiki "off oleh .5 pixel" masalah dengan menggunakan mengubah gaya
bahwa jawaban yang lain telah 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: menyelaraskan Vertikal apa-apa dengan hanya 3 baris CSS
Sebuah solusi sederhana untuk sebuah elemen yang tidak mengetahui nilai-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 Adam Tomat's jawaban yang ada disiapkan JSFiddle [contoh][1] untuk menyelaraskan teks di div:
<div class="cells-block">
text<br/>in the block
</div>
dengan menggunakan tampilan:flex di: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 yang lain [contoh][2] dan beberapa penjelasan di blog post.
Margin auto pada grid-item.
Demikian pula untuk Flexbox, menerapkan margin auto pada grid-item yang berpusat pada kedua sumbu:
.container {
display: grid;
}
.element {
margin: auto;
}
Gunakan:
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-apa jika anda don't ingin membuatnya center tambahkan "left:0" untuk menyelaraskan kiri.
Menggunakan flex, hati-hati dengan perbedaan di browser' rendering.
Ini bekerja 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 satu ini yang bekerja hanya 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>
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;
}