Bagaimana untuk pusat div horizontal, dan vertikal dalam wadah menggunakan flexbox. Dalam contoh di bawah ini, saya ingin setiap nomor di bawah ini satu sama lain (dalam baris), yang berpusat secara horizontal.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
Saya pikir anda ingin sesuatu seperti berikut ini.
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
background-color: tomato;
padding: 5px;
width: 20px;
height: 20px;
margin: 10px;
line-height: 20px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</div>
Lihat demo di:
Anda .flex-item
unsur-unsur yang harus tingkat blok (div
bukan span
) jika anda ingin tinggi dan atas/bawah bantalan untuk bekerja dengan baik.
Juga, pada .baris
, mengatur lebar untuk auto
bukan 100%
.
Anda .flex-container
properties baik-baik saja.
Jika anda ingin .baris
akan berpusat vertikal pada view port, menetapkan ketinggian 100% untuk html
dan tubuh
, dan juga zero out tubuh
margin.
Perhatikan bahwa .flex-container
kebutuhan yang tinggi untuk melihat keselarasan vertikal efek, jika tidak, wadah menghitung ketinggian minimum yang diperlukan untuk melampirkan konten, yang kurang dari pandangan port tinggi dalam contoh ini.
Catatan kaki:
The flex-flow
, flex-arah
, flex-bungkus
properties bisa membuat desain ini lebih mudah untuk menerapkan. Saya berpikir bahwa .baris
wadah tidak diperlukan kecuali jika anda ingin menambahkan beberapa styling seluruh elemen (gambar latar belakang, perbatasan dan sebagainya).
Sumber yang berguna adalah: http://demo.agektmr.com/flexbox/
Di bawah ini adalah dua umum berpusat solusi.
Satu untuk secara vertikal-blok flex item (flex-arah: kolom
) dan yang lainnya untuk horizontal sejajar flex item (flex-arah: baris
).
Dalam kedua kasus ketinggian berpusat divs dapat variabel, undefined, tidak diketahui, apa pun. Ketinggian berpusat div doesn't peduli.
Berikut's HTML untuk investasi:
<div id="container"><!-- flex container -->
<div class="box" id="bluebox"><!-- flex item -->
<p>DIV #1</p>
</div>
<div class="box" id="redbox"><!-- flex item -->
<p>DIV #2</p>
</div>
</div>
CSS (tidak termasuk gaya dekoratif)
Ketika flex barang-barang yang ditumpuk secara vertikal:
#container {
display: flex; /* establish flex container */
flex-direction: column; /* make main axis vertical */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
}
.box {
width: 300px;
margin: 5px;
text-align: center; /* will center text in <p>, which is not a flex item */
}
[DEMO](
)Ketika flex item ditumpuk secara horizontal:
Menyesuaikan flex-arah
aturan dari kode di atas.
#container {
display: flex;
flex-direction: row; /* make main axis horizontal (default setting) */
justify-content: center; /* center items horizontally, in this case */
align-items: center; /* center items vertically, in this case */
height: 300px;
}
[DEMO](
3/)Lingkup flex format konteks dibatasi untuk hubungan orangtua-anak. Keturunan dari flex wadah melampaui anak-anak yang tidak berpartisipasi dalam flex tata letak dan akan mengabaikan flex properti. Pada dasarnya, flex sifat yang tidak diwariskan melampaui anak-anak.
Oleh karena itu, anda akan selalu perlu untuk menerapkan display: flex
atau display: inline-flex
untuk sebuah elemen induk dalam rangka untuk menerapkan flex properti untuk anak-anak.
Dalam rangka untuk secara vertikal dan/atau horizontal center teks atau konten lain yang terkandung dalam item flex, membuat item (nested) flex container, dan ulangi berpusat aturan.
.box {
display: flex;
justify-content: center;
align-items: center; /* for single line flex container */
align-content: center; /* for multi-line flex container */
}
Rincian lebih lanjut di sini: https://stackoverflow.com/q/25311541/3597276
Atau, anda dapat menerapkan margin: auto
kandungan unsur flex item.
p { margin: auto; }
Belajar tentang flex auto
margin di sini: Metode untuk Menyelaraskan Flex Item (lihat kotak#56).
Ketika wadah flex memiliki beberapa baris (karena pembungkus) align-content
properti yang akan diperlukan untuk cross-sumbu alignment.
Dari spec:
8.4. Packing Flex Lines:
align-konten
properti
align-content
properti sejalan wadah flex garis dalam flex container ketika ada ruang ekstra di kayu salib-sumbu, yang mirip dengan bagaimanamembenarkan-content
sejalan masing-masing item dalam utama-axis. Catatan, properti ini tidak memiliki efek pada sebuah single-line flex container.
Rincian lebih lanjut di sini: https://stackoverflow.com/q/42613359/3597276
Flexbox didukung oleh semua browser utama, kecuali IE < 10. Beberapa versi browser seperti Safari 8 dan IE10, memerlukan vendor prefix. Untuk cara cepat untuk menambah prefiks menggunakan Autoprefixer. Rincian lebih lanjut dalam jawaban.
Untuk alternatif berpusat solusi menggunakan CSS meja dan sifat posisi melihat jawaban ini: https://stackoverflow.com/a/31977476/3597276
Tambahkan
.container {
display: flex;
justify-content: center;
align-items: center;
}
untuk wadah elemen apapun yang anda inginkan ke pusat. Dokumentasi: membenarkan-isi dan align-barang.
Don't lupa untuk menggunakan browser penting atribut tertentu:
align-item: center; -->
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
membenarkan-content: center; -->
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
Anda bisa membaca dua link untuk pemahaman yang lebih baik flex: http://css-tricks.com/almanac/properties/j/justify-content/ dan http://ptb2.me/flexbox/
Good Luck.
1 - Set CSS pada orang tua div untuk display: flex;
2 - Mengatur CSS pada orang tua div untuk flex-arah: kolom;
Perhatikan bahwa ini akan membuat semua konten dalam div itu berbaris dari atas ke bawah. Ini akan bekerja dengan baik jika orang tua div hanya berisi anak-anak dan tidak ada yang lain.
3 - Mengatur CSS pada orang tua div untuk membenarkan-content: center;
Berikut adalah contoh dari apa CSS akan terlihat seperti:
.parentDivClass {
display: flex;
flex-direction: column;
justify-content: center;
}
diplay: flex;
untuk itu's kontainer dan margin:auto;
untuk itu's item pekerjaan yang sempurna.
CATATAN: Anda harus men-setup width
dan height
untuk melihat efek.
#container{
width: 100%; /*width needs to be setup*/
height: 150px; /*height needs to be setup*/
display: flex;
}
.item{
margin: auto; /*These will make the item in center*/
background-color: #CCC;
}
<div id="container">
<div class="item">CENTER</div>
</div>
margin: auto
bekerja sempurna dengan flexbox. Itu memusatkan secara vertikal dan horizontal.
html, body {
height: 100%;
max-height: 100%;
}
.flex-container {
display: flex;
height: 100%;
background-color: green;
}
.container {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS</title>
</head>
<body>
<div class="flex-container">
<div class="container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>
</div>
</body>
</html>
div {
display: flex;
width: 200px;
height: 80px;
background-color: yellow;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-align: center; /* only important for multiple lines */
padding: 0 20px;
background-color: silver;
border: 2px solid blue;
}
<div>
<a href="#">text</a>
<a href="#">text with two lines</a>
</div>
Anda dapat membuat penggunaan
display: flex; align-item: center; membenarkan-content: center;
pada orang tua komponen