为什么我不能在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？

你能做出的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

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

答

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

text-align: center;

要居中的图像，你需要把保证金他们

.blocks img { 
    margin: 0 auto; 
}

答

给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>

答

逻辑居中对齐容器是好的，但也有一些部件之间的一些间隔。因此，所有组件都不适合块。

添加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>

为什么我不能在div中水平居中组件？

相关推荐