Aide à la programmation, réponses aux questions / Html / Div non centré dans le div parent avec la marge automatique [duplicate] - html, css

Div non centrée dans div parent avec marge auto [dupliquer] - html, css

Je sais qu'il me manque probablement quelque chose de vraiment évident, mais j'ai essayé display: block; et margin: 0 auto;, et le div intérieur ne se centre pas horizontalement dans mon div parent?

.row-fluid-wrapper.row-depth-1.row-number-3 {
display: block;
margin: 0 auto;
text-align: center;
border: 1px solid red;
}

.row-fluid {
width: 100%;
display: block;
margin: 0 auto;
}

.row-fluid [class*="span"] {
margin: 0 auto;
border: 1px solid blue;
display: block;
float: left;
min-height: 28px;
margin-left: .2%;
box-sizing: border-box;
height: 150px;
}

.row-fluid .span4 {
width: 31.914893614%;
}

<div class="row-fluid-wrapper row-depth-1 row-number-3 ">
<div class="row-fluid ">
<div class="span4 widget-span widget-type-custom_widget ">
<div class="cell-wrapper layout-widget-wrapper">
<span>
<div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 1</p>
<p>Text.</p>
</div>
</div>
</span>
</div>
</div>
<div class="span4 widget-span widget-type-custom_widget">
<div class="cell-wrapper layout-widget-wrapper">
<span><div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 2</p>
<p>Text.</p>
</div>
</div>
</span></div>
</div>
<div class="span4 widget-span widget-type-custom_widget">
<div class="cell-wrapper layout-widget-wrapper">
<span><div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 3</p>
<p>Text</p>
</div>
</div>
</span></div>
</div>
</div>
</div>

Comme vous pouvez le voir, les divs bleus sont plus alignés à gauche que d'être au milieu.

Réponses:

1 pour la réponse № 1

Supprimer le style float: left et rendre la propriété d'affichage comme display: inline-block pour la classe .row-fluid [class*="span"], comme suit. S'il vous plaît trouvez le exemple de travail ici.

.row-fluid [class*="span"] {
margin: 0 auto;
border: 1px solid blue;
display: inline-block;
/* float: left; */
min-height: 28px;
margin-left: .2%;
box-sizing: border-box;
height: 150px;
}

0 pour la réponse № 2

si bien compris, cela ferait:

Sur le CSS pour: .row-fluid [class*="span"]

Ajouter: display: inline-block;

Retirer: float: left; , margin-left: .2%; , display: block;

Cela se traduira par entièrement centré divs.

.row-fluid-wrapper.row-depth-1.row-number-3 {
display: block;
margin: 0 auto;
text-align: center;
border: 1px solid red;
}

.row-fluid {
width: 100%;
display: block;
margin: 0 auto;
}

.row-fluid [class*="span"] {
margin: 0 auto;
border: 1px solid blue;
/* display: block;*/
display: inline-block;
/*float: left;*/
min-height: 28px;
/* margin-left: .2%;*/
box-sizing: border-box;
height: 150px;
}

.row-fluid .span4 {
width: 31.914893614%;
}

<div class="row-fluid-wrapper row-depth-1 row-number-3 ">
<div class="row-fluid ">
<div class="span4 widget-span widget-type-custom_widget ">
<div class="cell-wrapper layout-widget-wrapper">
<span>
<div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 1</p>
<p>Text.</p>
</div>
</div>
</span>
</div>
</div>
<div class="span4 widget-span widget-type-custom_widget">
<div class="cell-wrapper layout-widget-wrapper">
<span><div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 2</p>
<p>Text.</p>
</div>
</div>
</span></div>
</div>
<div class="span4 widget-span widget-type-custom_widget">
<div class="cell-wrapper layout-widget-wrapper">
<span><div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 3</p>
<p>Text</p>
</div>
</div>
</span></div>
</div>
</div>
</div>

0 pour la réponse № 3

Il semble que vous n'utilisiez pas du tout les propriétés css correctement ...

1... postuler margin:0 auto avec display:block dans row-fluid est l'alignement au centre, mais il y a width:100% donc pas besoin d'utiliser margin:0 auto ici.

2... alors vous avez postulé margin: 0 auto dans span4 avec flaot:left, ce qui est encore faux.

3... pourquoi utilisez-vous display:block avec width:100% dans div.... les divs sont par défaut display:block avec width:100%...

4... en utilisant également margin-left:.2% dans span4 div ne sera pas centré visuellement car cela ajoutera également une marge au dernier div également ... appliquer margin:0 .1%

5... pas besoin non plus de régler min-height et height à la fois dans le spa4 div

Ce que vous devez faire est simplement de retirer le float:left du span4 classe et définissez-le comme display:inline-block...votre .span4 div alignera le centre comme vous l'avez utilisé text-align:center dans la div parent .row-fluid-wrapper

Remarque: ici, j'ai appliqué le font-size:0 à la classe parent pour supprimer l'espace blanc entre le inline-block div, puis définissez à nouveau la font-size:initial à la div intérieure

Voici la version minimisée de votre code

Extrait de pile

.row-fluid-wrapper.row-depth-1.row-number-3 {
text-align: center;
border: 1px solid red;
font-size: 0;
}

.row-fluid [class*="span"] {
border: 1px solid blue;
display: inline-block;
margin: 0 .1%;
box-sizing: border-box;
height: 150px;
font-size: initial;
}

.row-fluid .span4 {
width: 31.914893614%;
}

<div class="row-fluid-wrapper row-depth-1 row-number-3 ">
<div class="row-fluid ">
<div class="span4 widget-span widget-type-custom_widget ">
<div class="cell-wrapper layout-widget-wrapper">
<div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 1</p>
<p>Text.</p>
</div>
</div>
</div>
</div>
<div class="span4 widget-span widget-type-custom_widget">
<div class="cell-wrapper layout-widget-wrapper">
<div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 2</p>
<p>Text.</p>
</div>
</div>
</div>
</div>
<div class="span4 widget-span widget-type-custom_widget">
<div class="cell-wrapper layout-widget-wrapper">
<div class="clearfix cta-wrapper">
<div class="cta-text">
<p>Col 3</p>
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>