如何在父元素和子元素具有不同的％寬度時居中子div

我有兩行，每行有三個div。當行的寬度爲100％，每個div的寬度爲28％時，如何將每行中的三個div居中？我也試圖讓div保持中心，並對不同設備（如手機，平板電腦，臺式機和筆記本電腦）作出響應。如何在父元素和子元素具有不同的％寬度時居中子div

我已經試過：

margin: 0 auto; 
display: inline-block;

和：

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>

來源

2017-08-07 Hunter

可以使用Flexbox的用於.insideRows

* { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.insideRows { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 

 
/*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>

來源

2017-08-07 06:10:16 Gerard

它的工作原理！謝謝！ – Hunter

如何在父元素和子元素具有不同的％寬度時居中子div

回答

相關問題