我想將“box”的所有內容居中，然后將“shop-box”中的所有“items”居中，它們之間有一個空格
HTML
<div class="shop-container">
<div class="shop-box">
<div class="box">
<a href="#"><div class="item"></div></a>
<a href="#"><div class="item"></div></a>
<a href="#"><div class="item"></div></a>
</div>
</div>
</div>
CSS
.shop-container {
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
margin-top: 30px;
border: 5px solid red;
width: 100%;
height: 400px;
}
.shop-box {
width: 95%;
height: 83%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid rgb(51, 255, 0);
}
.box {
display: flex;
position: absolute;
width: 100%;
margin: 5 5px;
}
.item {
background: gray;
width: 300px;
height: 300px;
margin: 0 5px;
}
問題截圖：https : //i.stack.imgur.com/uNM84.png
uj5u.com熱心網友回復：
您可以通過使用 flexbox 來做到這一點，您已經使用了（盡管存在一些問題）。
在.shop-container你想無論是在width: 100%;或margin: 0 auto;。兩者都沒有意義（如果它占據了整個寬度，則將其居中成為毫無意義的行為。
我不確定您是否position: relative出于某種不相關的原因需要？如果沒有，那么我會擺脫它。
將內容（3 <a>s）包裹在s 的 3 層內這一事實<div>通常是一個壞主意（同樣，除非您有一些無關的理由這樣做）。我建議將其簡化很多，例如：
.box {
display: flex;
min-width: fit-content;
flex-flow: row nowrap; /* = (horizontal) dont wrap if the items dont fit horizontally; alternatives: wrap | nowrap; */
margin: 0 auto; /* = center the box, if it happens to be not as wide as its parent */
justify-content: center; /* = (horizontal) center the <a>s ; try these alternatives: flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: flex-start; /* = (vertical) align the <a>s to the top of this container (if they were to have different heights); possible alternatives: center | stretch | flex-start | flex-end | baseline */
gap: 0.4rem; /* = space between the <a>s */
border: 0.4rem solid rgb(51, 255, 0);
}
a {
display: flex;
flex: 0 0 auto; /* = start off autosized based on the item(s) inside here; neither grow nor shrink beyond that. */
flex-flow: column nowrap; /* = (vertical) place additional content that is located within the <a> (if any) under the current content */
justify-content: flex-start; /* = (vertical) the item(s), if different heights, should cling to the top */
align-items: center; /* = (horizontal) if the <a>s were to be be allowed to grow wider than neccecary, then center the item(s) within the link; alternatives: flex-start | flex-end | center */
}
.item {
width: 300px;
height: 300px;
background: gray;
}
/* a { padding: 0.4rem; background: blue; } /* uncomment to see that the <a> could be bigger than its content */
/* a:first-child .item { height: 400px; } /* uncomment to see what happens when one of the items is taller */
/* .box { width: 800px; } .item { width: 100px; } /* uncomment to see what happens if the box was wider than neccecary */<div class="box">
<a href="#"><div class="item"></div></a>
<a href="#"><div class="item"></div></a>
<a href="#"><div class="item"></div></a>
</div>
uj5u.com熱心網友回復：
也許這可能會有所幫助。我正在將display: flex和添加align-items: center到.shop-box課程中，并添加justify-content: space-between到.box.
在此處了解有關CSS Flexbox 的更多資訊。
.shop-container {
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
margin-top: 30px;
border: 5px solid red;
width: 100%;
height: 400px;
}
.shop-box {
display: flex;
align-items: center;
width: 95%;
height: 83%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 5px solid rgb(51, 255, 0);
}
.box {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
margin: 5 5px;
}
.item {
background: gray;
width: 300px;
height: 300px;
margin: 0 5px;
} <div class="shop-container">
<div class="shop-box">
<div class="box">
<a href="#"><div class="item"></div></a>
<a href="#"><div class="item"></div></a>
<a href="#"><div class="item"></div></a>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400633.html