如何在旋转木马中居图像 [英] How to center image in carousel

问题描述

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

How to center image in carousel ? I tried bootstrap 3 carousel using code from bootstrap tutorial:

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

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

For wide screen, carousel image is left aligned and there is ugly empty space in right of image. How to make carousel nicer ? Is it possible to center images or other solution ?

推荐答案

您有两个选择

1. 如果你想让图像占据整个轮播，那么

1. If you want the image to take up entire carousel then

img
{
宽度：100％;
身高：汽车;
}

img { width: 100%; height: auto; }

如果你不希望图像伸展100％，那么设置你想要的宽度（或者不要，只指定边距）和自动边距：

If you dont want the image to stretch 100 %, then set your desired width(or dont, just specify margin) and margin auto:

img
{
宽度：50％;
保证金：auto;
}

img { width: 50%; margin: auto; }

这篇关于如何在旋转木马中居图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！