如何在轮播中居中图像

Posted 2023-03-06

【中文标题】如何在轮播中居中图像

【英文标题】：How to center image in carousel

【发布时间】：2015-08-12 20:59:00

【问题描述】：

？ 我使用引导教程中的代码尝试了引导 3 轮播：

                <a href="/Webconte/Details/124">
                    <img src="/Webconte/Image/124" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/123">
                    <img src="/Webconte/Image/123" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/105">
                    <img src="/Webconte/Image/105" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/95">
                    <img src="/Webconte/Image/95" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/107">
                    <img src="/Webconte/Image/107" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/100">
                    <img src="/Webconte/Image/100" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/98">
                    <img src="/Webconte/Image/98" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/78">
                    <img src="/Webconte/Image/78" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/11">
                    <img src="/Webconte/Image/11" />
                </a>
            </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>

对于宽屏，轮播图像左对齐，图像右侧有难看的空白区域。 如何让旋转木马更好看？是否可以将图像或其他解决方案居中？

【问题讨论】：

也许用 Cycle2 代替？它有一个“居中幻灯片”插件：jquery.malsup.com/cycle2/demo/center.php

【参考方案1】：

你有两个选择

如果您希望图像占据整个轮播然后

img 

   width: 100%;
   height: auto;

如果您不希望图像拉伸 100 %，则设置您想要的宽度（或者不要，只需指定边距）和边距自动：

img

   width: 50%;
   margin: auto;

【讨论】：

谢谢，这也是与 BS5 一起使用的完美解决方案

【参考方案2】：

如果您希望图像垂直居中和水平居中（即图像的高度不是轮播的高度），最简单的方法是使用 flexbox 并确保宽度和高度与父级匹配。

<div class="carousel-item">
  <div class="d-flex justify-content-center w-100 h-100">
    <img src="images/2d_trad_1.png" class="align-middle" >
  </div>
</div>

【参考方案3】：

我知道我迟到了，但如果今天有人在寻找答案，我刚刚发现对我来说最好的解决方案是将图像放在 .carousel-item 的单独 div 中，然后使用 @ 居中987654322@:

<div class="carousel-item">
    <div class="d-flex justify-content-center">
        <img src="img.png" >
    </div>
</div>

【参考方案4】：

对我来说是这样的帮助。

.carousel-item img
 width: auto;
 height: 245px;
 max-height: 245px;
 margin: auto; 
 display: block;
 

【参考方案5】：

如果你真的想遵循 twitter 引导合成器，你应该按照文档中的说明使用 center-block 类。

Link to the documentation

Link to the bootply

代码摘录：

<img class="center-block" src="something.xxx" >

【参考方案6】：

尝试添加此 CSS 以使图像居中对齐：

.carousel-inner .item a img 

margin: auto;