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

Question

我正在使用 flex 创建页面，因为我正在学习过程中
我希望父banner class 中的内容位于具有 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>

附上我如何获得 output 的屏幕截图：在此处输入图像描述

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 属性（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>

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

问题描述

2 个解决方案

解决方案1
0 2021-01-24 10:34:49

解决方案2
0 2021-01-24 11:21:48

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

问题描述

2 个解决方案

解决方案1 0 2021-01-24 10:34:49

解决方案2 0 2021-01-24 11:21:48

解决方案1
0 2021-01-24 10:34:49

解决方案2
0 2021-01-24 11:21:48