為什么在內容中添加圖像時 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