Question

在我的JS应用程序中，我有一个面板分为3个部分，每个部分都有width: 100%和height:33.33%，然后在每个部分我想要一些div。

在中间部分，内部div必须垂直居中和水平的。
在底部，内部div必须留在底部但中间水平。

$(".panel2").hide();
$(".panel1").click(function() {
  $(this).hide();
  $(".panel2").show();
});
$(".panel2").click(function() {
  $(".panel1").show();
  $(this).hide();
});

div.box {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
}

div.box > .blur {
  width: 100%;
  height: 100%;
  background: url(http://goo.gl/0VTd9W);
  -webkit-filter: blur(8px);
}

div.box > .panel1,
div.box > .panel2 {
  width: 100%;
  Height: 100%;
  Background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
}

div.box > .panel2 {
  background: rgba(255, 0, 0, 0.2);
}


/** sub sections **/

div.panel1 > .top,
div.panel1 > .middle,
div.panel1 > .bottom {
  width: 100%;
  height: 33.33%;
  border: 1px dashed #000;
}

div.middle > div,
div.bottom > div {
  width: 30px;
  height: 30px;
  border: 1px dashed #000;
  float: left;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="blur"></div>
  <div class="panel1">
    <div class="top"></div>
    <div class="middle">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="bottom">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="panel2">Panel 2</div>
</div>

正如您所看到的，我已经实现了div，但由于父div是基于百分比的，因此无法在所描述的位置对齐它们。

有想法调整它们吗？

Answer 1

有很多方法可以实现您的愿望，例如transform: translate(-50%);，position:absolute和否定margin，display:inline-block;，display: flex;等这里使用display:inline-block;。您可以添加一个div（.centered-vertically），提供height:100%;，不要忘记display:inline-block;发生的remove extra spaces，最后使用vertical-align属性将它们与bottom，middle和top对齐。但是，这里已经完成了代码。

$(".panel2").hide();
$(".panel1").click(function() {
  $(this).hide();
  $(".panel2").show();
});
$(".panel2").click(function() {
  $(".panel1").show();
  $(this).hide();
});

div.box {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
}

div.box > .blur {
  width: 100%;
  height: 100%;
  background: url(http://goo.gl/0VTd9W);
  -webkit-filter: blur(8px);
}

div.box > .panel1,
div.box > .panel2 {
  width: 100%;
  Height: 100%;
  Background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
}

div.box > .panel2 {
  background: rgba(255, 0, 0, 0.2);
}


/** sub sections **/

div.panel1 > .top,
div.panel1 > .middle,
div.panel1 > .bottom {
  width: 100%;
  height: 33.33%;
  border: 1px dashed #000;
}

div.middle > div:not(.centered-vertically),
div.bottom > div:not(.centered-vertically) {
  width: 30px;
  height: 30px;
  border: 1px dashed #000;
  display:inline-block;
  vertical-align:middle;
  margin: 10px;
}

div.bottom > div:not(.centered-vertically)
{
  vertical-align:bottom;
  }

div.middle > .centered-vertically,
div.bottom > .centered-vertically
{
  display:inline-block;
  vertical-align:middle;
  height:100%;
  
  }

div.middle
{
  text-align:center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="blur"></div>
  <div class="panel1">
    <div class="top"></div>
    <div class="middle">
      <div class="centered-vertically"></div><div></div><div></div><div></div>
    </div>
    <div class="bottom">
      <div class="centered-vertically"></div><div></div><div></div><div></div>
    </div>
  </div>
  <div class="panel2">Panel 2</div>
</div>

Answer 2

Flexbox是最简单的解决方案。只需将以下规则添加到中间和底部容器中：

.middle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

codepen

如何根据％对齐中心或底部的内部div

2 个答案: