将两个div放在包装器中

Question

我正试图将#left和#center置于#wrapper内，如下所示：

我试图让#center水平和垂直位于#wrapper的实际中心位置，并且#left将位于他左边的一个小范围内。我如何实现这一目标？

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  border: 1px solid red;
}

#left {
  display: inline-block;
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}

<div class="c">
  <div>content content content</div>
  <div>content content content</div>

  <div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>


  </div>
  <div>content content content</div>
  <div>content content content</div>

Jsfiddle：https://jsfiddle.net/y6r585jk/2/

Answer 1

你知道#left的宽度。这是13vh。

在右侧添加一个具有相同宽度的伪元素。

然后将容器中的所有三个元素居中。

伪是#left的平衡。它使#center完全居中。

您可以使用visibility: hidden隐藏伪。

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;

  /* new */
  display: flex;
  justify-content: center; /* center children horizontally */
  align-items: center;     /* center children vertically */
}

/* new */
#wrapper::after {
  content: 'right';
  width: 13vh;
  border: 1px dashed black;
  /* visibility: hidden; */
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  border: 1px solid red;
  margin: 0 5px; /* new */
}

#left {
  display: inline-block;
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}

<div class="c">
  <div>content content content</div>
  <div>content content content</div>
  <div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
  </div>
  <div>content content content</div>
  <div>content content content</div>
</div>

https://jsfiddle.net/y6r585jk/4/

也可以使用实际（DOM）元素或绝对定位来实现布局。

此处有更多详情：Center and right align flexbox elements

Answer 2

您可以使用flexbox

.c {
border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
    height: 80vh;
    margin-top: 13vh;
}
#wrapper {
  display : flex;
  justify-content : center;
  align-items : center;
    height: 13vh;
    margin-top: 2vh;
    border: 1px solid blue;
}
#center {
    display: inline-block;
    width:12vw;
    height:10vh;
    border: 1px solid red;
}
#left {
    display: inline-block;
    width:13vh;
    height:13vh;
    border: 1px solid green;
}

<div class = "c">
<div>content content content</div> 
<div>content content content</div> 

<div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
</div>
<div>content content content</div> 
<div>content content content</div> 

Answer 3

非flexbox解决方案是提供中心元素position: relative，使用text-align: center将其置于容器中心，并提供左元素position: absolute和right设置calc(50% + 7vw)（与中心元素的距离为1 vw - 您可以根据需要更改）：

＆＃13;

＆＃13;

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;
  text-align:center;
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  margin-top: 1vh;
  border: 1px solid red;
  position: relative;
}

#left {
  display: inline-block;
  position: absolute;
  right: calc(50% + 7vw);
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}

＆＃13;

<div class="c">
  <div>content content content</div>
  <div>content content content</div>

  <div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
  </div>
  <div>content content content</div>
  <div>content content content</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这适用于您的问题..

首先将一些flex属性应用于包装器以使项目居中..

#wrapper {
display: flex;
justify-content: center;
align-content: center;
border: 1px solid blue;
}

这就把一切都放在了中心..

接下来使用align-eslf垂直居中。

#center {
display: inline-block;
align-self: center;

最后添加保证金..我已经添加了1％来测试..

#center {
display: inline-block;
align-self: center;
margin-left: 1%;

我有这个..

Answer 5

我能满足这个答案的唯一方法是使用智能边距来居中中心元素。

我觉得必须有一个更好的方法，但我确定我已经尝试了所有组合..大声笑

无论如何..

CSS - 我在右侧添加了一个额外的包装器..

margin-left：#left上的5％ margin-left：wrapper_r上的15％

您可以通过调整这些边距轻松计算绝对中心。

                          .c {
              border: 1px solid black;
              margin-left: auto;
              margin-right: auto;
              width: 60vw;
              height: 80vh;
              margin-top: 13vh;
            }


          .wrapper1 {
          display: flex;
          justify-content: flex-start;
          border: 1px solid blue;    }


        #left {
              margin-left: 5%;
        width: 13vw;
        height: 13vh;
        border: 1px solid green;
      }

          #wrapper_r {
      display: flex;
      align-items: center;
      margin-left:15%

          }
          #center {
          flex: 1;
        width: 12vw;
        height: 10vh;
        border: 1px solid red;
      }

HTML

          <div class="c">
            <div>content content content</div>
            <div>content content content</div>


          <div class="wrapper1">
              <div id="left">left</div>

            <div id="wrapper_r">
              <div id="center">center</div>


            </div></div>


            <div>content content content</div>
            <div>content content content</div>

我希望这对您有用，我希望如果Flexbox有更好的解决方案，可以在这里发布..

您的布局可能更适合或网格或更聪明的想法：）