Pertanyaan Cara Menengah Div Terapung dalam Wadah


Apakah mungkin untuk memusatkan div mengambang di wadah dan jika demikian bagaimana?

Sebagai contoh saya memiliki halaman dengan div kontainer yang berisi banyak variabel berukuran (dinamis) mengambang (kiri) divs. The divs meluap ke baris berikutnya reguarly tetapi mereka tidak pernah berpusat di div wadah, bukan alined dengan kiri. Terlihat seperti ini:

----------------------------
-                          -
- +++  +++++  ++++  ++     -
- +++  +++++  ++++  ++     -
-                          -
- ++   ++++++  +++  +      -
- ++   ++++++  +++  +      -
-                          -
----------------------------

Sedangkan saya ingin div mengambang yang berpusat di wadah seperti ini:

----------------------------
-                          -
-   +++  +++++  ++++  ++   -
-   +++  +++++  ++++  ++   -
-                          -
-   ++   ++++++  +++  +    -
-   ++   ++++++  +++  +    -
-                          -
----------------------------

Terima kasih,

DLI


32
2017-07-23 11:43


asal


Jawaban:


Itu mungkin. Menggunakan http://www.pmob.co.uk/pob/centred-float.htm dan http://css-discuss.incutio.com/wiki/Centering_Block_Element sebagai sumber.

Berikut ini adalah biola yang menunjukkan konsep, menggunakan HTML dan CSS dari bawah: https://jsfiddle.net/t9qw8m5x/

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

Ini adalah CSS minimum yang diperlukan untuk efek:

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
}

#inner > li {
    float: left;
}

Penjelasan:

Mulailah dengan hanya li { float: left; } aturan. Kemudian bungkus pelampung itu di left: 50%; relative position, jadi ujung kiri <ul>Kotak berada di tengah horizontal halaman, kemudian gunakan aturan di #outer untuk benar menyesuaikannya sehingga pusat #inner sejajar dengan halaman.


23
2017-07-23 11:46



Hitung jumlah total lebar ruang layar yang akan ditempati oleh tata letak yang diinginkan kemudian buat induknya memiliki lebar yang sama dan terapkan margin: otomatis.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60px */
    margin: 10px;
    /* 6 borders x 10px = 60px */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}
<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>


0
2017-09-05 22:10



Dengan CSS3 Anda juga dapat mencapai ini dengan flexbox:

HTML:

<ul id="flexcontainer">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2 with long text</a></li>
     <li><a href="#">Item 3</a></li>
</ul>

Min CSS:

#flex-container {
    display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

#flex-container > li {
    float: left;
}

Fiddle (dengan beberapa gaya untuk visualisasi): https://jsfiddle.net/k5o37dff/4/

Lebih lanjut tentang flexbox: https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

Dukungan browser: https://www.w3schools.com/cssref/css3_pr_flex.asp


0
2018-04-12 07:47



Trik bagus untuk memusatkan "div" elemen adalah untuk mengatur "margin: auto", itu akan memusatkan mereka.


-6
2017-07-23 11:46



<div id='contain'><center><div id='content'>qwerty</div></center></div>

ATAU

<div id='contain'><div id='content'>qwerty</div></div>

<style type='text/css'>

#content   {

  width:200px;

  height:200px;

  margin:auto;
  /* margin:auto; requires width and i think height to be defined in nearly all browsers */

  }</style>

-6
2017-07-24 00:58