Question

我正在做一个简单的div学习，但是在将孩子的div垂直居中放置并放置空格时遇到了问题。

我尝试过，发短信给我，证明内容合理，等等，但没有任何效果。两者之间的均匀间隔也不起作用。

我一定对这些div有点毛病。

我希望将div div等距放置并垂直居中放置一些空间，但是我应用的所有内容均无效。

代码：

html：

<div class="row fill-height" style="justify-content: space-between; background-color: red; height:600px"> 

   <div class="col-md-10 col-6" style="height: 100% ;display: flex;justify-content: center;">

        <div class="col-md-3 col-12" style="height: 100%;background-color: deeppink" id="bannerCol">
          <img class="banner" src="../../../assets/Images/generic/banner{{player.rank}}.png" style="position: absolute;top: 0;left: 0;"/>
          <div id="buttonZone" style="position: absolute; width: 100%;text-align: center;top: 0;left: 0;" >
            <div>
              <input type="text" class="form-control" placeholder="Summoner Name">
            </div>
            <div>
              <select  class="custom-select" >
                <option selected disabled value>Rank</option>
              </select>
          </div>
              <div>
              <select  class="custom-select" >
                <option selected disabled value>Role</option>
              </select>

        </div>
            <div>
              <img (click)="deletePlayer(i)" id="deleteIcon" src="../../../assets/Images/addPlayer/deleteIcon.png" />
    </div>
          </div>
        </div>

    </div>


</div>

css：

div{
  border: 1px solid yellow;
}

.fill-height {
  flex: 1;
}

在线代码编辑器-https://www.codeply.com/p/2ppUBHGfbM

将div居中垂直放置在父div内

0 个答案: