1
Ich habe zwei Zeilen mit drei div in jeder Zeile. Wie zentriere ich die drei div in jeder Zeile, wenn die Zeilen Breiten von 100% haben und jedes div eine Breite von 28% hat? Ich versuche auch, das Div zu zentrieren und auf verschiedene Geräte (wie Telefone, Tablets, Desktops und Laptops) zu reagieren.So zentrieren Sie untergeordnete div, wenn sowohl die übergeordneten als auch die untergeordneten Elemente unterschiedliche% -Weiten haben
Ich habe versucht:
margin: 0 auto;
display: inline-block;
und:
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>
Es funktioniert! Vielen Dank! – Hunter