Centrage divs flottants dans un autre div
J'ai cherché d'autres questions et, bien que ce problème semble similaire à quelques autres, rien de ce que j'ai vu jusqu'à présent ne semble résoudre le problème que j'ai.
J'ai un div qui contient un certain nombre d'autres div, dont chacun est flotté à gauche. Ces divs contiennent chacun une photo et une légende. Tout ce que je veux, c'est que le groupe de photos soit centré dans la div contenant.
Comme vous pouvez le voir dans le code ci-dessous, j'ai essayé d'utiliser à la fois overflow:hidden et margin:x auto sur les divs parents, et J'ai également ajouté un clear:both (comme suggéré dans un autre sujet) après les photos. Rien ne semble faire une différence.
Je vous Remercie. J'apprécie toutes les suggestions.
<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>
7 réponses
Tout d'Abord, retirez le float attribut à l'intérieur div. s. Alors, mettez text-align: center sur le principal externe div. Et pour les divS internes,
utilisation display: inline-block. Pourrait également être sage de leur donner des largeurs explicites aussi.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
Avec Flexbox, vous pouvez facilement horizontalement (et verticalement) centre - flottait enfants à l'intérieur d'un div.
Donc, si vous avez un balisage simple comme ça:
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Avec 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;
}
(c'est le (attendu - et indésirable) résultat )
Ajoutez maintenant les règles suivantes au wrapper:
display: flex;
justify-content: center; /* align horizontal */
Et les enfants flottants s'alignent au centre (Démo)
Juste pour le plaisir, pour obtenir l'alignement vertical ainsi juste ajouter:
align-items: center; /* align vertical */
DÉMO
J'ai accompli ce qui précède en utilisant un positionnement relatif et en flottant vers la droite.
Code 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/
Cela fonctionnera dans IE8 et plus, mais pas plus tôt (surprise, surprise!)
Je ne me souviens pas de la source de cette méthode malheureusement, donc je ne peux pas donner crédit à l'auteur original. Si quelqu'un d'autre le sait, veuillez poster le lien!
La solution suivante n'utilise pas de blocs en ligne. Cependant, il nécessite deux divs d'aide:
- le contenu est flotté
- l'Assistant interne est flotté (il s'étend autant que le contenu)
- l'aide intérieure est poussée à droite à 50% (sa gauche s'aligne avec le centre de l'aide extérieure)
- le contenu est tiré à gauche 50% (son centre s'aligne avec la gauche de l'aide interne)
- l'Assistant externe est configuré pour masquer le débordement
.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; NE FONCTIONNERA PAS dans L'un des navigateurs IE. Voici ce que j'ai utilisé.
// 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;
}
Solution:
<!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>
Dans mon cas, je n'ai pas pu obtenir la réponse de @Sampson pour travailler pour moi, au mieux j'ai eu une seule colonne centrée sur la page. Dans le processus, cependant, j'ai appris comment le flotteur fonctionne réellement et créé cette solution. À sa base, le correctif est très simple mais difficile à trouver comme en témoigne ce fil qui a eu plus de 146k vues au moment de ce post sans mention.
Tout ce qui est nécessaire est de totaliser la quantité de largeur de l'espace de l'écran que la mise en page souhaitée occupera parent la même largeur et appliquer la marge: auto. Ça y est!
Les éléments de la mise en page dicteront la largeur et la hauteur du div "extérieur". Prenez chaque" myFloat " ou la largeur ou la hauteur de l'élément + ses bordures + ses marges et ses rembourrages et ajoutez-les tous ensemble. Ensuite, ajoutez les autres éléments ensemble de la même manière. Cela vous donnera la largeur parente. Ils peuvent tous être des tailles quelque peu différentes et vous pouvez le faire avec moins ou plus d'éléments.
Ex.(chaque élément a 2 côtés, donc border, margin et padding sont multipliés x2)
Donc un élément qui a une largeur de 10px, frontière 2px, marge 6px, rembourrage 3px ressemblerait à ceci: 10 + 4 + 12 + 6 = 32
Ajoutez ensuite toutes les largeurs totales de votre élément Ensemble.
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
Dans cet exemple, la largeur de la div "externe" serait 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>