为什么在内容中添加图像时 justify-content:center 不起作用？

Question

我正在使用 flex 创建页面，因为我正在学习过程中
我希望父级 banner 中的内容位于具有 3 个子级的 div 的中间 class="quick-link" class="carousel slide" class="article"

目前，它们位于 div 的左侧

当我在内容中添加图像时，div 没有占据 div 的整个宽度。
会不会是因为我给了图片一些宽度？

我已将d-flex 提供给 HTML 结构中的主要父级，并尝试应用 justify-content: center; 以便父级中的所有子级都进入中间

谁能告诉我，我做错了什么？

HTML 代码：

<main>
    <div class="main-container">
        <!-- section 1 - Banner -->
        <div class="banner d-flex">
            <div class="quick-link">
                <p>QUICKLINK</p>
                <p>Fashion & Accessories</p>
                <p>Spa & Massage</p>                    
            </div>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="d-block w-100" src="images/banner-mobile.jpg" alt="First slide">
                  </div>
                  <div class="carousel-item">
                    <img class="d-block w-100" src="images/banner-mobile.jpg" alt="Second slide">
                  </div>
                  <div class="carousel-item">
                    <img class="d-block w-100" src="images/banner-mobile.jpg" alt="Third slide">
                  </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
              </div>
            <div class="article">
                <div class="sony-tv banner-img">
                    <img src="images/free.png" alt="" style="width:40%;">
                </div>
                <div class="samsung banner-img">
                    <img src="images/free.png" alt="" style="width:40%;">
                </div>
                <div class="beat-phone banner-img">
                    <img src="images/free.png" alt="" style="width:40%;">
                </div>
            </div>
        </div>
    </div>
</main>

附上我如何获得输出的截图： enter image description here

Answer 1

使用 display flex，有时宽度会根据内容起作用，因此请尝试使用 100% 宽度。

CSS

.d-flex{
 display: flex;
 justify-content: center;
 width: 100%;
}

Answer 2

您也愿意分享您的 CSS 代码吗？以便我们查看您的 CSS 的详细信息并找出解决此问题的最佳方法。

根据给定的描述，我猜“目前，它们位于 div 的左侧”的原因是您的主标签（或其他“外部 div”，例如 div class="main-container ") 宽度未设置为 100% 。这个行为的目的是告诉你的 main 占据它父母宽度的 100%。在这种情况下，主标签的父标签将是主体标签。

因为一旦你将 display:flex 属性应用到父级，这个父级内的项目（现在是 flex box）将被设置为适合它自己的最小宽度，除非你为它们设置一个特定的值。

之后，您可以为您的三个 div 设置 flex attribute (class="quick-link" class="carousel slide" class="article")，让浏览器知道三个 div 的宽度你想展示。

提示：您可以使用浏览器的内置检查器来检查元素的属性，这些属性将显示元素的占用宽度、高度等。对于 Firefox 和 Chrome，默认的快捷键是 Ctrl+Shift+C。

    <style>
        body{
            margin:0;
        }
        main.widthFixed {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-bottom: 10px;
        }

        p{
            text-align: center;
        }

        .red {
            background-color: #F00;
            flex: 1;
        }

        .green {
            background-color: #0f0;
            flex: 2;
        }

        .blue {
            background-color: #00f;
            flex: 1;
        }

        main.widthNonFixed {
            display: flex;
            justify-content: center;
        }
        .widthNonFixed .red{
            flex: none;
        }
        .widthNonFixed .green{
            flex: none;
        }
        .widthNonFixed .blue{
            flex: none;
        }

    </style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>

<body>
    <main class="widthFixed">
        <div class="red">
            <p>I am flex: 1</p>
        </div>
        <div class="green">
            <p>I am flex: 2</p>
        </div>
        <div class="blue">
            <p>I am flex: 1</p>
        </div>
    </main>

    <main class="widthNonFixed">
        <div class="red">
            <p>I am flex: none</p>
        </div>
        <div class="green">
            <p>I am flex: none</p>
        </div>
        <div class="blue">
            <p>I am flex: none</p>
        </div>
    </main>
</body>

</html>