[英]How can i center 3 div inside a div with a space between
I would like to center all the content of the "box", then all the "items" in the "shop-box" with a space between them我想将“盒子”的所有内容居中,然后是“商店盒子”中的所有“项目”,它们之间有一个空格
HTML 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 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;
}
screenshot of the problem: https://i.stack.imgur.com/uNM84.png问题截图: https://i.stack.imgur.com/uNM84.png
Perhaps this might help.也许这可能会有所帮助。 I'm adding
display: flex
and align-items: center
to the .shop-box
class, and justify-content: space-between
to .box
.我将
display: flex
和align-items: center
添加到.shop-box
class 和justify-content: space-between
到.box
。
Learn more about CSS Flexbox here .在此处了解有关 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>
You can do that by using a flexbox, which you already are (though with some problems).你可以通过使用 flexbox 来做到这一点,你已经是(尽管有一些问题)。
On .shop-container
you'll want either the width: 100%;
在
.shop-container
上,您需要width: 100%;
or margin: 0 auto;
或
margin: 0 auto;
. . Both doesn't make sense (if it takes up the whole width, centering it becomes a meaningless act.
两者都没有意义(如果它占据了整个宽度,那么居中它就变得毫无意义。
I'm not sure if you need the position: relative
for some unrelated reason?我不确定您是否需要
position: relative
出于某种不相关的原因? If not then i'd get rid of that.如果没有,那么我会摆脱它。
The fact that you've wrapped the content (the 3 <a>
s) within 3 layers of <div>
s is generally a bad idea (again unless you have some unrelated reason to do so).您将内容(3 个
<a>
s)包装在 3 个<div>
层中的事实通常是一个坏主意(同样,除非您有一些不相关的理由这样做)。 I'd recommend simplifying it a lot, such as this:我建议简化很多,例如:
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.