Rumah > Soal Jawab > teks badan
Kawalan css menambah p dengan nama kelas bersatu Saya mahu ia dipaparkan secara mendatar dan menegak di tengah Walau bagaimanapun, saiz p adalah berbeza, jadi adakah pelajar lain mempunyai idea yang baik.
迷茫2017-06-26 10:54:35
lentur susun atur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
#main p
{
}
</style>
</head>
<body>
<p id="main">
<p style="background-color:coral;">红色</p>
</p>
</body>
</html>
过去多啦不再A梦2017-06-26 10:54:35
Salah satunya ialah menggunakan susun atur fleksibel untuk memusatkan elemen kanak-kanak secara mendatar dan menegak;
.flex {
paparan: flex;
align-item: center;
justify-content: center;
}
.satu {
kedudukan: mutlak;
kiri: 50%;
atas: 50%;
transformasi: terjemah(-50%, -50%);
}
Portal
扔个三星炸死你2017-06-26 10:54:35
Pemusatan menegak:
kaedah susun atur jadual, kaedah blok sebaris
kaedah kedudukan mutlak
pemusatan viewport
penyelesaian berasaskan flexbox
过去多啦不再A梦2017-06-26 10:54:35
Soalan biasa, seseorang di luar negara telah menyelesaikan pemusatan menegak dalam pelbagai situasi: https://css-tricks.com/center...
Kami juga menjana kod terus untuk anda dan mempertimbangkan sama ada ia serasi dengan IE: http://howtocenterincss.com/
Anda juga boleh menyemak versi terjemahan: https://github.com/chenjsh36/...
Selepas membaca ini, saya tidak perlu risau lagi tentang pelbagai masalah vertical centering 23333
巴扎黑2017-06-26 10:54:35
Anda boleh menggunakan susun atur elastik di atas, tetapi ia tidak menyokong pelayar peringkat rendah
Anda boleh menggunakan kedudukan mutlak untuk memusatkan p secara menegak dan mendatar
p{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 620px;
height: 618px;
margin: auto;
padding: 30px 0;
box-sizing: border-box;
}
PHP中文网2017-06-26 10:54:35
Pelbagai lapisan anjal? Pelbagai pengiraan? Memusatkan kiri dan kanan adalah mudah, hanya
margin:0 auto;
baik, tetapi naik dan turun sedikit lebih menyusahkan. Walaupun ia menyusahkan dalam banyak cara
1 Berdasarkan js, ini agak menyusahkan, jadi saya tidak akan menjelaskannya secara terperinci
2, disable:table Ini memerlukan kerjasama dua DOM. Keserasian utama juga adalah sederhana3 Gunakan transfrom Jika anda tidak mempertimbangkan keserasian dan tidak mengetahui ketinggian, ia amat disyorkan. Kaedah anggaran adalah seperti berikut:
.dom{
Tentukan sendiri lebar kedudukan: mutlak;
ubah: terjemah(-50%, -50%);
kiri: 50%;
atas: 50%;
}
Saya tahu lebarnya, tetapi saya tidak tahu betapa tingginya saya mengesyorkan ini
4 Jika anda tahu lebar dan tinggi, anda tidak memerlukan yang di atas, kerana yang ini serasi gila
Tentukan sendiri lebar dan tinggi
kedudukan: mutlak; jidar: auto;
atas:0;
kanan: 0;
bawah:0;
kiri: 0;
}
5, reka letak lentur, sebagai tambahan kepada keserasian, Semua yang lain baik-baik saja.
<p class="topeng">
<p class="mask-con">
这是文字信息
</p>.topeng{
position: fixed;
top:0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.5);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;}
.mask-con{
width: 200px;
/*height: 90px;*/
height: auto;
background: #fff;
font-size: 14px;
padding: 20px;
border-radius:10px;}
6 Jika anda mempertimbangkan keserasian ====> sila semak item pertama. [Berapa umur itu? Masih mempertimbangkan IE789, sokongan IE7 DOM1 utama tidak begitu baik, jadi. . . 】
滿天的星座2017-06-26 10:54:35
Unsur induk
{
position: relative;
}Unsur kanak-kanak
{
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}習慣沉默2017-06-26 10:54:35
Tambah tiga lagi kaedah.
Pusat elemen dengan lebar dan ketinggian yang diketahui menggunakan kedudukan mutlak atau tetap:
.horizontal-and-vertical-center {
width: 200px;
height: 200px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}Mengguna pakai display: table elemen berpusat reka letak, menyokong lebar dan ketinggian yang tidak tentu, dan serasi dengan IE8+ dan pelayar moden yang lain:
.table {
display: table;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.cell {
display: table-cell;
vertical-align: center;
}
.horizontal-and-vertical-center {
width: 800px;
margin: 0 auto;
/* 如果不定宽度的话用 inline-block 并且外层 text-align: center */
}:before Pseudo-element mengembangkan ketinggian garisan (kaedah yang digunakan oleh AmazeUI dalam komponen modal, dan menyokong lebar dan ketinggian yang tidak pasti, IE8+):
.am-modal {
/* ... */
text-align: center;
/* ... */
}
.am-modal:before {
content: "0B";
display: inline-block;
height: 100%;
vertical-align: middle
}
.am-modal-dialog {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
/* ... */
}