Question

我尝试将div dice-wrapper和Button Horizontaly和Verticaly居中。问题是，如果我给dice-wrapper 100％的高度，可以很好地与骰子一起工作，但是按钮现在位于底部页。当我将Button div放入骰子div中时，按钮位于正确的位置，我无法进入骰子下面。

    html,
    body {
      height: 100%;
    }
    
    .container {
      height: 100%;
    }
    
    #dice-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: auto;
      border: cornflowerblue solid 1px;
    }
    
    .die img {
      max-width: 7rem;
    }
    
    .btn {
      display: flex;
      border: cornflowerblue solid 1px;
    }

     <body>
        <div class="container">
          <div id="dice-wrapper">
            <div class="die">
              <input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
              <img src="img/dice-5.png" alt="Dice" class="dice1" id="dice-1" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
              <img src="img/dice-5.png" alt="Dice" class="dice2" id="dice-2" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
              <img src="img/dice-5.png" alt="Dice" class="dice3" id="dice-3" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-4" name="dice-4" value="dice-4" />
              <img src="img/dice-5.png" alt="Dice" class="dice4" id="dice-4" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-5" name="dice-5" value="dice-5" />
              <img src="img/dice-5.png" alt="Dice" class="dice5" id="dice-5" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-6" name="dice-6" value="dice-6" />
              <img src="img/dice-5.png" alt="Dice" class="dice6" id="dice-6" />
            </div>
          </div>
          <div class="btn">
            <button class="btn_roll">roll</button>
          </div>
        </div>
        <script type="text/javascript" src="js/app.js"></script>
      </body>

Answer 1

尝试此答案。在这里，我用具有.die类的父div包装了.dies div。并将.dies容器和.btn容器放入#dice-wrapper容器中。

    html,
    body {
      height: 100%;
    }
    
    .container {
      height: 100%;
    }
    
    #dice-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      border: cornflowerblue solid 1px;
    }

    .dies {
      display: flex;
      flex-direction: row;
    }
    
    .die img {
      max-width: 7rem;
    }
    
    .btn {
      display: flex;
      flex-direction: row;
      border: cornflowerblue solid 1px;
    }

     <body>
        <div class="container">
          <div id="dice-wrapper">
          <div class="dies">
            <div class="die">
              <input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
              <img src="img/dice-5.png" alt="Dice" class="dice1" id="dice-1" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
              <img src="img/dice-5.png" alt="Dice" class="dice2" id="dice-2" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
              <img src="img/dice-5.png" alt="Dice" class="dice3" id="dice-3" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-4" name="dice-4" value="dice-4" />
              <img src="img/dice-5.png" alt="Dice" class="dice4" id="dice-4" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-5" name="dice-5" value="dice-5" />
              <img src="img/dice-5.png" alt="Dice" class="dice5" id="dice-5" />
            </div>
            <div class="die">
              <input type="checkbox" id="dice-6" name="dice-6" value="dice-6" />
              <img src="img/dice-5.png" alt="Dice" class="dice6" id="dice-6" />
            </div>
            </div>
          <div class="btn">
            <button class="btn_roll">roll</button>
          </div>
          </div>
          
        </div>
        <script type="text/javascript" src="js/app.js"></script>
      </body>

垂直和水平居中flexbox

1 个答案: