Saya memiliki sebuah div dengan dua gambar dan h1
. Semua dari mereka harus vertikal sejajar di dalam div, di samping satu sama lain.
Salah satu gambar harus mutlak
diposisikan dalam div.
Apa CSS yang diperlukan untuk ini untuk bekerja pada semua browser umum?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Wow, masalah ini lebih populer. It's didasarkan pada kesalahpahaman dalam vertical-align
properti. Artikel ini sangat baik menjelaskan hal itu:
Pemahaman vertical-align
, atau "Bagaimana (Tidak) Untuk Vertikal Pusat Content" oleh Gavin Kistner.
"Cara center di CSS" adalah sebuah web yang bagus alat yang membantu untuk menemukan yang diperlukan CSS berpusat atribut untuk situasi yang berbeda.
Singkatnya (dan untuk mencegah link busuk):
vertical-align: middle
. Namun, "konteks" tidak seluruh orang tua wadah tinggi, tinggi baris teks mereka. [jsfiddle contoh]()mutlak
dan menentukan tinggi
, margin-top
dan atas
posisi. [jsfiddle contoh](http://jsfiddle.net/YFncP/2/)line-height
untuk mengisi tingginya. Metode ini cukup fleksibel dalam pengalaman saya. [jsfiddle contoh](http://jsfiddle.net/d4zGF/)Sekarang bahwa flexbox dukungan meningkat, CSS ini diterapkan untuk mengandung elemen vertikal pusat yang terkandung item:
.container {
display: flex;
align-items: center;
}
Gunakan diawali versi jika anda juga perlu untuk target Explorer 10, dan tua (< 4.4) browser Android:
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Aku digunakan sangat sederhana ini code:
HTML:
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
CSS:
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
Jelas, apakah anda menggunakan .kelas
atau #id
, hasilnya tidak't perubahan.
Teknik dari teman saya:
HTML:
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
CSS:
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
DEMO di sini
Semua dari mereka perlu ditata vertikal dalam div
Selaras ** bagaimana? Puncak dari gambar sejajar dengan bagian atas dari teks?
salah Satu gambar yang mutlak menjadi kebutuhan strategis dalam div.
Benar-benar diposisikan relatif terhadap DIV? Mungkin anda bisa membuat sketsa apa yang anda'kembali mencari...?
fd telah dijelaskan langkah-langkah untuk posisi mutlak, serta menyesuaikan tampilan H1
elemen sehingga gambar akan muncul sejalan dengan itu. Untuk itu, saya'll menambahkan bahwa anda dapat menyesuaikan gambar dengan menggunakan vertical-align
gaya:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...ini akan menempatkan header dan gambar bersama-sama, dengan tepi atas sejajar. Keselarasan lainnya ada pilihan; lihat dokumentasi. Anda juga mungkin menemukan itu bermanfaat untuk menjatuhkan DIV dan memindahkan gambar dalam H1
elemen - ini memberikan nilai semantik ke dalam wadah, dan menghilangkan kebutuhan untuk menyesuaikan tampilan dari H1
:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Menggunakan rumus ini, dan akan selalu bekerja tanpa retak:
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
Hampir semua metode perlu untuk menentukan ketinggian, tapi sering kita don't memiliki ketinggian apapun. Jadi di sini adalah CSS3 3 garis trik yang doesn't perlu tahu yang tinggi.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It's didukung bahkan di IE9.
dengan awalan vendor:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Sumber: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Trik saya adalah untuk dimasukkan ke dalam div tabel dengan 1 baris dan 1 kolom, set 100% dari lebar dan tinggi, dan properti vertical-align:middle.
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
Biola:
untuk perataan vertikal: d-flex menyelaraskan item-pusat
untuk alinyemen horizontal: d-flex membenarkan-content-pusat
.container {
height: 180px;
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center bg-info container">
<div class="bg-light p-2">I am in Center</div>
</div>
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}
<div class="container">
<div class="child">I am in Center</div>
</div>
Menggunakan CSS untuk vertikal pusat, anda dapat membiarkan bagian luar wadah bertindak seperti sebuah meja, dan konten sebagai sel tabel. Dalam format ini anda benda-benda akan tetap terpusat. :)
Aku bersarang beberapa benda di JSFiddle untuk contoh, tapi ide inti adalah seperti ini:
HTML
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* act as a table so we can center vertically its child */
display: table;
/* set dimensions */
height: 200px;
width: 200px;
/* horizontal center text */
text-align: center;
/* create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* act as a table cell */
display: table-cell;
/* and now we can vertically center! */
vertical-align: middle;
/* some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
Beberapa benda contoh:
HTML
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
Hasil
Kita dapat menggunakan fungsi CSS perhitungan untuk menghitung ukuran elemen dan kemudian posisi elemen anak sesuai.
Contoh HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
Dan CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
Demo yang dibuat di sini: [
][1]Solusi ini bekerja dengan baik dengan responsif div
tinggi
dan lebar
juga.
Catatan: fungsi calc adalah tidak diuji untuk kompatibilitas dengan browser lama.
Secara default h1 adalah elemen blok dan akan membuat pada baris pertama img, dan akan menyebabkan kedua img muncul pada baris berikut blok.
Untuk menghentikan hal ini terjadi anda dapat mengatur h1 untuk memiliki inline aliran perilaku:
#header > h1 { display: inline; }
Karena untuk benar-benar memposisikan img di dalam div, anda perlu mengatur mengandung div untuk memiliki "yang dikenal size" sebelum ini akan bekerja dengan baik. Dalam pengalaman saya, anda juga perlu mengubah posisi atribut dari default - position: relative bekerja untuk saya:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Jika anda bisa mendapatkan itu untuk bekerja, anda mungkin ingin mencoba semakin menghapus ketinggian, lebar, posisi atribut dari div.header untuk mendapatkan minimal atribut yang diperlukan untuk mendapatkan efek yang anda inginkan.
UPDATE:
Berikut adalah contoh lengkap yang bekerja pada Firefox 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
Per hari ini, saya telah menemukan sebuah solusi baru untuk vertikal sejajar beberapa teks-garis dalam sebuah div dengan menggunakan CSS3 (dan saya juga menggunakan bootstrap v3 sistem grid untuk mempercantik UI), yang adalah sebagai berikut:
.immediate-parent-of-text-containing-div{
height: 50px; /* or any fixed height that suits you.*/
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}
Sesuai pemahaman saya, langsung orang tua dari teks yang mengandung unsur harus memiliki beberapa ketinggian. Saya berharap ini akan membantu anda terlalu. Terima kasih!!!
Favorit baru saya cara untuk melakukannya adalah dengan CSS grid:
/* technique */
.wrapper {
display: inline-grid;
grid-auto-flow: column;
align-items: center;
justify-content: center;
}
/* visual emphasis */
.wrapper {
border: 1px solid red;
height: 180px;
width: 400px;
}
img {
width: 100px;
height: 80px;
background: #fafafa;
}
img:nth-child(2) {
height: 120px;
}
<div class="wrapper">
<img src="https://source.unsplash.com/random/100x80/?bear">
<img src="https://source.unsplash.com/random/100x120/?lion">
<img src="https://source.unsplash.com/random/100x80/?tiger">
</div>
#3 cara untuk membuat pusat anak div pada orang tua div
[Demo][2]
/* 1st way */
.parent1 {
background: darkcyan;
width: 200px;
height: 200px;
position: relative;
}
.child1 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
margin: -15px;
}
/* 2nd way */
.parent2 {
display: flex;
justify-content: center;
align-items: center;
background: darkcyan;
height: 200px;
width: 200px;
}
.child2 {
background: white;
height: 30px;
width: 30px;
}
/* 3rd way */
.parent3 {
position: relative;
height: 200px;
width: 200px;
background: darkcyan;
}
.child3 {
background: white;
height: 30px;
width: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent1">
<div class="child1"></div>
</div>
<hr />
<div class="parent2">
<div class="child2"></div>
</div>
<hr />
<div class="parent3">
<div class="child3"></div>
</div>
Saya telah menggunakan solusi berikut (dengan tidak ada posisi dan tidak ada garis tinggi) sejak lebih dari setahun, ia bekerja dengan IE 7 dan 8 juga.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>