Jak wyśrodkować pływające elementy DIV w pojemniku

Question

Czy można wyśrodkować pływające elementy div w kontenerze, a jeśli tak, to w jaki sposób?

Na przykład mam stronę z pojemnikiem div zawierającym wiele zmiennych (generowanych dynamicznie) pływających (lewych) elementów div. Divy przepełniają się do następnej linii, ale nigdy nie są wyśrodkowane w div kontenera, zamiast tego są wyrównane lewą. Wygląda to tak:

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

Zważywszy Chciałbym z oczkami DIV w środku pojemnika tak:

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

Dzięki,

DLiKS

Answer 1

to jest możliwe. Korzystanie z http://www.pmob.co.uk/pob/centred-float.htm i http://css-discuss.incutio.com/wiki/Centering_Block_Element jako źródła.

Tutaj jest skrzypce demonstrując koncepcję, za pomocą HTML i CSS z dołu: 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> 

Jest to minimalna CSS potrzebny do efektu:

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

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

#inner > li { 
    float: left; 
} 

Objaśnienie:

Zacznij od reguły li { float: left; }. Następnie zawiń te elementy w pliku left: 50%; relative position, aby lewa krawędź pola <ul> znajdowała się w środkowym środku strony, a następnie użyj reguł w sekcji #outer, aby poprawnie dopasować go, aby środek #inner był wyrównany względem strony.

Answer 2

Przyjemną sztuczką do wyśrodkowania elementu "div" jest ustawienie "margin: auto", wyśrodkuje je.

Answer 3

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

LUB

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

Answer 4

Oblicz łączną kwotę szerokości przestrzeni ekranu, że pożądany układ zajmie następnie dokonać dominującą tę samą szerokość i stosowania margin: auto.

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