Question

我尝试了很多不同的解决方案：将类中心块添加到“行”，将“行”包装进去。我只是希望有4个图像，居中，但是它们被转移到左边。请帮帮我，我的错误是什么？谢谢。

<div class = "row center-block">
    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt="tea">
        </a>
            <div class = "desc">1</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive"  alt="Посуда">
        </a>
            <div class = "desc">2</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive">
        </a>
        <div class = "desc">3</div>
            </div>

    <div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt=" ">
        </a>
            <div class = "desc">4</div>
    </div>
</div>

Answer 1

class =＆＃34; img-responsive center-block＆＃34;在img标签中添加这个

Answer 2

我认为这就是你想要的。注意，如果较大的尺寸相同，则只需指定较小的尺寸。您不需要col-lg-2，因为col-md-2涵盖md方面及以上。我添加的只是col-md-offset-2，它将第2列移动过来。你有8列（2x4），共有12列。所以12-8 = 4.如果你想让它居中，那么你想分裂那么4/2 = 2。

<div class = "row center-block">
    <div class = "col xs-12 col-sm-6 col-md-2 col-md-offset-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt="tea">
        </a>
            <div class = "desc">1</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive"  alt="Посуда">
        </a>
            <div class = "desc">2</div>
    </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive">
        </a>
        <div class = "desc">3</div>
            </div>

    <div class = "col xs-12 col-sm-6 col-md-2">
        <a target="_blank" href="tea-003.jpg">
            <img src="tea-003.jpg" class="img-responsive" alt=" ">
        </a>
            <div class = "desc">4</div>
    </div>
</div>

如果您希望它们在所有屏幕尺寸上均匀分布整行，则需要查看flexbox。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何在bootstrap（col xs-12 col-sm-6 col-md-2 col-lg-2）中居中，有4个imgs？

2 个答案: