我通过引导添加了三个图像。 但是这些图像显示在页面的左侧,而我希望它们显示在页面的中心。
我该怎么做?
这是映像和引导程序的代码
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" root="teal" >
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="img/pic1.jpg" class="d-block w-100" alt="..."width="1010"height="600px" >
</div>
<div class="carousel-item" data-interval="2000">
<img src="img/pic2.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
<div class="carousel-item">
<img src="img/pic3.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
根据本文,您可以使用 bootstrap 的.center-block
css 类来居中对齐图像。
您可以像这样将其插入<img>
标签中:
<img class=".center-block">