cari

Rumah  >  Soal Jawab  >  teks badan

javascript - css mengawal div untuk sentiasa dipusatkan secara mendatar dan menegak, dan saiz div ini berbeza

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.

欧阳克欧阳克2744 hari yang lalu1171

membalas semua(10)saya akan balas

  • 迷茫

    迷茫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>

    balas
    0
  • 过去多啦不再A梦

    过去多啦不再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

    balas
    0
  • 扔个三星炸死你

    扔个三星炸死你2017-06-26 10:54:35

    Pemusatan menegak:
    kaedah susun atur jadual, kaedah blok sebaris
    kaedah kedudukan mutlak
    pemusatan viewport
    penyelesaian berasaskan flexbox

    balas
    0
  • 过去多啦不再A梦

    过去多啦不再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

    balas
    0
  • 黄舟

    黄舟2017-06-26 10:54:35

    Tambahkan display:flex,align-item:center pada elemen induk

    balas
    0
  • 巴扎黑

    巴扎黑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;
}

    balas
    0
  • 三叔

    三叔2017-06-26 10:54:35

    susun atur fleksibel juga disyorkan

    balas
    0
  • PHP中文网

    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 sederhana

    3 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

    .dom{

    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>

    </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. . . 】

    7, tiada yang lain. Yang di atas sudah pasti cukup. Jika ada yang bagus, sila tambahkan

    balas
    0
  • 滿天的星座

    滿天的星座2017-06-26 10:54:35

    Unsur induk

    {
 position: relative;
}

    Unsur kanak-kanak

    {
position:absolute;
top:50%;
left:50%;
transform:(-50%,-50%);
}

    balas
    0
  • 習慣沉默

    習慣沉默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;
    /* ... */
}

    balas
    0
  • Batalbalas