Question

如何将图像置于旋转木马中心？我使用bootstrap教程中的代码尝试了bootstrap 3 carousel：

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

对于宽屏幕，旋转木马图像左对齐，图像右侧有空白空间。如何使旋转木马更好？是否可以将图像或其他解决方案居中？

Answer 1

您有两个选择

如果您希望图片占据整个转盘，那么

IMG { 宽度：100％; 身高：自动; }
如果你不想让图像伸展100％，那么设置你想要的宽度（或者不要，只是指定边距）和自动边距：

IMG { 宽度：50％; 保证金：自动; }

Answer 2

如果你真的想要关注twitter bootstrap synthax，你应该使用 center-block 类，如文档中所述。

<强> Link to the documentation

<强> Link to the bootply

代码摘录：

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

Answer 3

如果您希望图像垂直和水平居中（即图像的高度不是轮播的高度），最简单的方法是使用 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" alt="...">
  </div>
</div>

Answer 4

尝试添加此CSS以将图像与中心对齐：

.carousel-inner .item a img {

margin: auto;

}

Answer 5

对我来说这是帮助。

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

Answer 6

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

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

如何在旋转木马中居图像

6 个答案: