时间戳

首页 > 解决方案 > 无法将 DIV 中的元素居中

html - 无法将 DIV 中的元素居中

问题描述

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

我已将margin-rightof 元素设置col-12 col-md-6 col-lg-4为，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>

截屏

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

标签： htmlcsscentertext-align

解决方案

首先，在您的演示代码中，没有#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>

推荐阅读