无法将 DIV 中的元素居中

Question

您好，我无法在移动设备上将元素居中。 网址：https://dachsteinkaffee.myshopify.com/

我已将元素 col-12 col-md-6 col-lg-4 的 margin-right 设置为 0px，但看起来边距仍然出现。

尝试将 text-align:center 应用于类 .img-box。但这并没有帮助。

我尝试过类似这样的不同选项，但都不起作用：

@media (max-width: 991px) {
  #home-spotlight-1541414200176 .container-fluid .spotlight-3-blocks {
    text-align: center;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row spotlight-3-blocks">
    <div class="col-12 col-md-6 col-lg-4">
        <div class="spotlight-item">
            <div class="img-box">
                <a href="" class="animate-scale">
                    <img
                        data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
                        src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
                        alt="Dachsteinkaffee"
                        itemprop="logo"
                        class="lazyautosizes lazyloaded"
                        data-sizes="auto"
                        sizes="370px"
                    />
                </a>
            </div>
            <div class="content spotlight-inner">
                <h3 class="title"><span> MORGENGRUSS </span></h3>
                <p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
                <a href="" class="spotlight-button btn"> <span> ZUM KAFFEE </span> </a>
            </div>
        </div>
    </div>
</div>

知道如何解决这个问题吗？

Answer 1

首先，在您的演示代码中，没有#home-spotlight-1541414200176 .container fluid，所以它在这里不起作用。

然后，由于您的图像不足以覆盖整个空间，因此会自动生成此边距以填充空白。

只需将text-align:center 应用到您的班级.img-box：

演示：

@media (max-width: 991px) {
  .img-box {
    text-align: center;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="row spotlight-3-blocks">
    <div class="col-12 col-md-6 col-lg-4">
        <div class="spotlight-item">
            <div class="img-box">
                <a href="" class="animate-scale">
                    <img
                        data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
                        src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
                        alt="Dachsteinkaffee"
                        itemprop="logo"
                        class="lazyautosizes lazyloaded"
                        data-sizes="auto"
                        sizes="370px"
                    />
                </a>
            </div>
            <div class="content spotlight-inner">
                <h3 class="title"><span> MORGENGRUSS </span></h3>
                <p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
                <a href="" class="spotlight-button btn"> <span> ZUM KAFFEE </span> </a>
            </div>
        </div>
    </div>
</div>

Answer 2

试试这个 #home-spotlight-1541414200176 .container-fluid有问题

@media (max-width: 991px) {.spotlight-3-blocks {
text-align: center;
}}

<div class="row spotlight-3-blocks">
<div class="col-12 col-md-6 col-lg-4">
    <div class="spotlight-item">
        <div class="img-box">
            <a href="" class="animate-scale">
                <img
                    data-src="//cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
                    src="https://cdn.shopify.com/s/files/1/0571/1786/8231/files/Dachstein-Kaffee-Morgengruss-Startseite_800x800_crop_center.jpg?v=1621598467"
                    alt="Dachsteinkaffee"
                    itemprop="logo"
                    class="lazyautosizes lazyloaded"
                    data-sizes="auto"
                    sizes="370px"
                />
            </a>
        </div>
        <div class="content spotlight-inner">
            <h3 class="title"><span> MORGENGRUSS </span></h3>
            <p class="des"><span> Der Filterkaffee eignet sich nicht nur für Frühaufsteher... </span></p>
            <a href="" class="spotlight-button btn"> <span> ZUM KAFFEE </span> </a>
        </div>
    </div>
</div>