Centraggio div galleggianti all'interno di un altro div
https://stackoverflow.com/questions/1269245
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho cercato altre domande e, mentre questo problema sembra simile a un paio di altri, nulla che io ho visto finora sembra affrontare il problema che sto avendo.
Ho un div che contiene una serie di altri div, ognuno dei quali è galleggiava a sinistra. Queste div contengono ciascuno una foto e una didascalia. Tutto quello che voglio è per il gruppo di foto per essere centrato all'interno del div contenitore.
Come si può vedere dal codice qui sotto, ho provato utilizzando sia overflow:hidden e margin:x auto dei div genitore, e ho anche aggiunto un clear:both (come suggerito in un altro argomento), dopo le foto. Nulla sembra fare la differenza.
Grazie. Apprezzo tutti i suggerimenti.
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
Soluzione
Innanzitutto, rimuovere l'attributo float sulle divs interne. Poi, mettere text-align: center sulla div esterno principale. E per i divs interne,
utilizzare display: inline-block . Potrebbe anche essere saggio di dare loro larghezze esplicite troppo.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
Altri suggerimenti
Flexbox si può facilmente in orizzontale (e verticale) Centro di galleggiava bambini all'interno di un div.
Quindi, se avete semplice markup in questo modo:
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
con i CSS:
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
(questo è il (previsto - e indesiderabile) RISULTATO )
A questo punto aggiungere le seguenti regole per l'involucro:
display: flex;
justify-content: center; /* align horizontal */
ed i bambini galleggiavano vengono centro allineati ( DEMO )
Solo per divertimento, per ottenere l'allineamento verticale e basta aggiungere:
align-items: center; /* align vertical */
DEMO
ho realizzato quanto sopra utilizzando posizionamento relativo e variabile a destra.
Il codice HTML:
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS:
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JSFiddle: http://jsfiddle.net/MJ9yp/
Questo funziona in IE8 e fino, ma non prima (sorpresa, sorpresa!)
Non ricordo la fonte di questo metodo, purtroppo, quindi non posso dare credito all'autore originale. Se qualcun altro sa, si prega di inviare il link!
La seguente soluzione non usa blocchi in linea. Tuttavia, esso richiede due div helper:
- Il contenuto viene fatto galleggiare
- L'helper interno è fatto galleggiare (si estende tanto quanto il contenuto)
- L'helper interno sia spinto in 50% (suoi allinea sinistra con centro di helper esterno)
- Il contenuto è tirato a sinistra il 50% (il suo centro si allinea con sinistra di aiutante interno)
- L'helper esterno è impostato per nascondere l'overflow
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>
display: inline-block; non funziona in qualsiasi browser IE. Ecco quello che ho usato.
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Soluzione:
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
Nel mio caso, non ho potuto ottenere la risposta da @Sampson a lavorare per me, nel migliore dei casi ho avuto una sola colonna centrata sulla pagina. Nel processo però, ho imparato come il galleggiante effettivamente funziona e ha creato questa soluzione. Al suo centro la correzione è molto semplice ma difficile da trovare, come evidente da questa discussione che ha avuto più di 146K vista, al momento di questo post senza menzione.
Tutto ciò che serve è a totale la quantità di larghezza di spazio sullo schermo che il layout desiderato occuperà poi fare il genitore la stessa larghezza e applicare margin: auto. Questo è tutto!
Gli elementi nel layout detterà la larghezza e l'altezza del div "esterno". Prendere ogni o larghezza "myFloat" di elemento o altezza + i suoi confini + i suoi margini e le sue imbottiture e aggiungere tutti insieme. Quindi aggiungere gli altri elementi insieme nello stesso modo. Questo vi darà la larghezza genitore. Tutti possono essere un po 'diverse dimensioni e si può fare questo con meno o più elementi.
Ex. (Ogni elemento ha 2 lati così confine, margine e padding ottenere x2 moltiplicato)
Quindi, un elemento che ha una larghezza di 10px, 2px confine, 6px margine, padding 3px sarebbe simile a questa: 10 + 4 + 12 + 6 = 32
Quindi aggiungere tutto il vostro elemento di larghezze sommate.
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
In questo esempio la larghezza del div "esterno" sarebbe 112.
.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 = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
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>
