1
J'ai deux lignes avec trois div sur chaque ligne. Comment centrer les trois div dans chaque rangée lorsque les rangs ont une largeur de 100% et que chaque div a une largeur de 28%? J'essaie également d'obtenir le div pour rester centré et être sensible à différents dispositifs (comme les téléphones, les tablettes, les ordinateurs de bureau et les ordinateurs portables).Comment centrer enfant div lorsque les éléments parent et enfant ont des largeurs% différentes
J'ai essayé:
margin: 0 auto;
display: inline-block;
et:
left: 50%;
right: 50%;
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/*Phones*/
[class*="col-"] {
width: 100%;
height: auto;
float: left;
}
.row::after {
content: "";
clear: both;
display: table;
}
.insideRows {
margin: 0 auto;
}
.buttons {
font-size: 20px;
color: black;
border: solid 3px #3366ff;
padding: 1em;
margin: 1em;
text-align: center;
}
/*For Tablets*/
@media only screen and (min-width: 600px) {
.col-m-5 {
width: 41.66%;
}
}
/*For Desktops/Laptops*/
@media only screen and (min-width: 768px) {
.col-3 {
width: 28%;
}
.col-12 {
width: 100%;
}
}<div class="col-12 row">
<div class="insideRows">
<div class="col-3 col-m-5 buttons">Row 1 Column 1</div>
<div class="col-3 col-m-5 buttons">Row 1 Column 2</div>
<div class="col-3 col-m-5 buttons">Row 1 Column 3</div>
</div>
<div class="insideRows">
<div class="col-3 col-m-5 buttons">Row 2 Column 1</div>
<div class="col-3 col-m-5 buttons">Row 2 Column 2</div>
<div class="col-3 col-m-5 buttons">Row 2 Column 3</div>
</div>
</div>
Il fonctionne! Merci! – Hunter