我怎樣才能均勻地間隔我的圖像並居中對齊？

Question

我正在嘗試創建一排 3 個圖像，底部有文本。 我讓圖像彼此相鄰排列，但我無法將它們均勻地隔開。 圖像之間根本沒有空間，並且它沒有居中於頁面的中間。 它更傾向於左邊。 我怎樣才能解決這個問題？ 謝謝

 /*------------------------Outdooor-----------------------------*/.outdoor{ padding: 50px; display:flex; }.Kayaking{ width: 450px; text-align: center; }.Hiking{ width: 450px; text-align: center; }.museums{ width: 450px; text-align: center; } #kayak{ height: 350px; width: 500px; } #hiking{ height: 350px; width: 500px; } #museums{ height: 350px; width: 500px; }

 <section class="outdoor"> <div class="Kayaking"> <img id="kayak" src="Images/Kayaking_Elliott_Bay_in_Seattle.jpg"> <h1>Kayaking at Elliot Bay</h1> <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go right before sunset to see the sun go down behind the Mountians. </p> </div> <div class="Hiking"> <img id="hiking" src="Images/RattlesnakeLedge_KatieEgresi_032321-scaled.jpg"> <h1>Hiking at Rattlesnake Ledge</h1> <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of Seattle, it's not too far to get away from the city and remain close. </p> </div> <div class="museums"> <img id="museums" src="Images/Museum-of-Pop-Culture_2018_BuildingExterior.webp"> <h1>Seattle Museum of Pop Culture</h1> <p>Explore modern pop Culture. Excellent location for family and kids. Located just one block away from the space needle </p> </div> </section>

Answer 1

你應該試試這個，

這是更新后的outdoor類CSS

.outdoor{
    padding: 50px;
    display:flex;
    align-items:center;
    justify-content:space-evenly;
}

這是完整的輸出，

 /*------------------------Outdooor-----------------------------*/.outdoor{ padding: 50px; display:flex; align-items:center; justify-content:space-evenly; }.Kayaking{ width: 450px; text-align: center; }.Hiking{ width: 450px; text-align: center; }.museums{ width: 450px; text-align: center; } #kayak{ height: 350px; width: 500px; } #hiking{ height: 350px; width: 500px; } #museums{ height: 350px; width: 500px; }

 <section class="outdoor"> <div class="Kayaking"> <img id="kayak" src="Images/Kayaking_Elliott_Bay_in_Seattle.jpg"> <h1>Kayaking at Elliot Bay</h1> <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go right before sunset to see the sun go down behind the Mountians. </p> </div> <div class="Hiking"> <img id="hiking" src="Images/RattlesnakeLedge_KatieEgresi_032321-scaled.jpg"> <h1>Hiking at Rattlesnake Ledge</h1> <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of Seattle, it's not too far to get away from the city and remain close. </p> </div> <div class="museums"> <img id="museums" src="Images/Museum-of-Pop-Culture_2018_BuildingExterior.webp"> <h1>Seattle Museum of Pop Culture</h1> <p>Explore modern pop Culture. Excellent location for family and kids. Located just one block away from the space needle </p> </div> </section>

Answer 2

您可以使用 100% 寬度代替以 px 為單位的手動寬度。 px 寬度設置元素的永久大小。 你可以使用百分比的寬度，所以它工作正常

 /*------------------------Outdooor-----------------------------*/.outdoor{ padding: 50px; display:flex; }.Kayaking{ /***-- set width of column according to 3 divs --**/ width: 33.333%; text-align: center; /***-- Add padding for space because it's added inside your group --**/ padding: 0 10px; }.Hiking{ /***-- set width of column according to 3 divs --**/ width: 33.333%; text-align: center; /***-- Add padding for space because it's added inside your group --**/ padding: 0 10px; }.museums{ /***-- set width of column according to 3 divs --**/ width: 33.333%; text-align: center; /***-- Add padding for space because it's added inside your group --**/ padding: 0 10px; } /**--- Use common class for future, it will help you when you add new imagebox into this group. ---**/.img-set{ width: 100%; height: auto; }

 <section class="outdoor"> <div class="Kayaking"> <img id="kayak" class="img-set" src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg"> <h1>Kayaking at Elliot Bay</h1> <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go right before sunset to see the sun go down behind the Mountians. </p> </div> <div class="Hiking"> <img id="hiking" class="img-set" src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg"> <h1>Hiking at Rattlesnake Ledge</h1> <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of Seattle, it's not too far to get away from the city and remain close. </p> </div> <div class="museums"> <img id="museums" class="img-set" src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg"> <h1>Seattle Museum of Pop Culture</h1> <p>Explore modern pop Culture. Excellent location for family and kids. Located just one block away from the space needle </p> </div> </section>

您可以使用媒體查詢根據您的屏幕調整列

@media (width < 767px){
//Your Code
}

Answer 3

將您的 css 代碼更改為：

.outdoor {
    padding: 50px;
    display: flex;
    justify-content: center;
}

.Kayaking {
    width: 450px;
    text-align: center;
}

.Hiking {
    width: 450px;
    text-align: center;
    margin: 0 10px;
}

.museums {
    width: 450px;
    text-align: center;
}

#kayak {
    height: 350px;
    max-width: 100%;
}

#hiking {
    height: 350px;
    max-width: 100%;
}

#museums {
    height: 350px;
    max-width: 100%;

}