比较来自世界各地的卖家的域名和 IT 服务价格

在页面中心制作图像 Bootstrap

我使用最新版本 bootstrap 我试图将我的形象放在旋转木马页上的死点。

我把班级
container

在主要 div 旋转木马,但它仍然转向页面左侧的中心?


我的Carousel代码如下:


 Main Carousel 
<div class="carousel slide container" data-ride="carousel" id="carousel-example-generic">
<div class="carousel-inner">
<div class="item active">
<img alt="Ants climbing on grass" src="assets/img/carousel/slide01.jpg"/>
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>
End Main Carousel


从我在互联网上找到的东西,它遵循那个课程
container

必须在页面上核心所有内容。 那么这里发生了什么,我怎么能解决它?

我也试图在下一个代码周围包裹整个旋转木马,但达到了相同的结果。


<div class="container">
<!-- Carousel inside here -->
</div>
已邀请:

知食

赞同来自:

为了 Bootstrap 3 这将是 class="img-responsive center-block".

只需将其添加到您的所有图像,如下所示:
<img class="img-responsive center-block" src="assets/img/carousel/slide01.jpg"/>

知食

赞同来自:

尝试使用附带的网格布局 bootstrap. 之后添加以下类 "item-active" - "col-lg-6 col-lg-offset-3"


 Main Carousel 
<div class="carousel slide container" data-ride="carousel" id="carousel-example-generic">
<div class="carousel-inner">
<div class="item active col-lg-6 col-lg-offset-3">
<img alt="Ants climbing on grass" src="assets/img/carousel/slide01.jpg"/>
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>
End Main Carousel


您也可以尝试应用此类。 div 并安装 "margin: 0 auto;". 它可以为您工作。

风见雨下

赞同来自:

实现理想水平定心的最佳方法 - 使用
margin: 0 auto

. 这就是您的代码看起来的样子:


<div class="carousel slide container" data-ride="carousel" id="carousel-example-generic" style="margin: 0 auto;">
<div class="carousel-inner">
<div class="item active">
<img alt="Ants climbing on grass" src="assets/img/carousel/slide01.jpg"/>
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>


如果您不喜欢这一决定,您也可以使用它:


<div class="carousel slide container" data-ride="carousel" id="carousel-example-generic" style="display: flex; justify-content: center;">
<div class="carousel-inner">
<div class="item active">
<img alt="Ants climbing on grass" src="assets/img/carousel/slide01.jpg"/>
<div class="carousel-caption">
Ants climbing on grass
</div>
</div>
</div>
</div>


但是,这使用了所有浏览器不支持的相对较新的规范。 更多信息 FlexBox 厘米。
http://net.tutsplus.com/tutori ... xbox/
.

卫东

赞同来自:

将其添加到您的用户文件中 css

. IMG响应 {
利润: 0 汽车; }

莫问

赞同来自:

.center {
margin: auto;
width: 50%;
text-align:center;
}

要回复问题请先登录注册