爲什麼我不能在div中水平居中組件？

我有塊，塊內有三個框。該CSS是爲什麼我不能在div中水平居中組件？

.blocks { 
    display: block; 
    margin: 0 auto; 
    width: 60%; 
    height: 350px; 
} 


.box1, .box2, .box3 { 

    width: 33.333%; 
    height: 300px; 
    vertical-align: top; 
    display: inline-block; 
    zoom: 1; 

}

在框中，有一個圖像和一個文本。我想讓它們水平居中。所以我這樣做

.box1, .box2, .box3 { 

    width: 33.333%; 
    height: 300px; 
    vertical-align: top; 
    display: inline-block; 
    zoom: 1; 
    margin-left: auto; 
    margin-right: auto; 
}

但他們不居中。如圖所示。我的HTML是

<div class="blocks"> 
    <div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;"> 
     <!-- One image and text here --> 
    </div> 
    <div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;"> 
     <!-- One image and text here --> 
    </div> 
    <div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;"> 
     <!-- One image and text here --> 
    </div> 
</div>

如何將組件水平居中在div？

來源

2016-03-01 batuman

你能做出的jsfiddle或plnkr？ – martin

發佈你的html標記或小提琴會更好 – Gintoki

'text-align：center'？ – Morpheus

只給text-align: center;所有的三個盒子。

.box1, .box2, .box3 { 

    width: 33.333%; 
    height: 300px; 
    vertical-align: top; 
    display: inline-block; 
    zoom: 1; 
    text-align: center; 
}

Working Fiddle

來源

2016-03-01 10:10:13 ketan

是的，我正在移動箱子。只是轉移文字作品。 – batuman

要居中的文字，你可以使用

text-align: center;

要居中的圖像，你需要把保證金他們

.blocks img { 
    margin: 0 auto; 
}

來源

2016-03-01 10:08:26 tomiy

給IMGS一個width: 100%和中央的文字

.blocks { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    height: 350px; 
 
} 
 

 
.box1, 
 
.box2, 
 
.box3 { 
 
    width: 33.333%; 
 
    height: 300px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
} 
 

 
.box1, 
 
.box2, 
 
.box3 { 
 
    width: 33.333%; 
 
    height: 300px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
img{ 
 
    width: 100%; 
 
} 
 
h5{ 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="blocks"> 
 
    <div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;"> 
 
    <!-- One image and text here --> 
 
    <img src="http://i.imgur.com/IMiabf0.jpg" alt="" /> 
 
    <h5>This is Cute Cat</h5> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;"> 
 
    <!-- One image and text here --> 
 
    <img src="http://i.imgur.com/IMiabf0.jpg" alt="" /> 
 
    <h5>This is Cute Cat</h5> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;"> 
 
    <!-- One image and text here --> 
 
    <img src="http://i.imgur.com/IMiabf0.jpg" alt="" /> 
 
    <h5>This is Cute Cat</h5> 
 
    </div> 
 
</div>

來源

2016-03-01 10:08:56 Gintoki

邏輯居中對齊容器是好的，但也有一些部件之間的一些間隔。因此，所有組件都不適合塊。

添加float：left;到每個盒子將解決問題。

.blocks { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    height: 350px; 
 
} 
 

 

 
.box1, .box2, .box3 { 
 

 
    width: 33.333%; 
 
    height: 300px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    zoom: 1; 
 
    float: left; 
 

 
}

<div class="blocks"> 
 
    <div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;"> 
 
     <img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;"> 
 

 
    </div> 
 
    <div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;"> 
 
     <img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;"> 
 
    </div> 
 
    <div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;"> 
 
     <img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;"> 
 
    </div> 
 
</div>

來源

2016-03-01 10:19:39 Siva

爲什麼我不能在div中水平居中組件？

回答

相關問題