简体   繁体   English

我如何将 3 个 div 居中在一个 div 中,中间有一个空格

[英]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: flexalign-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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM