垂直和水平居中的挠性框
垂直和水平居中的挠性框
提问于 2019-11-07 17:48:57
我试着在div骰子包装器和Button Horizontaly的中间做，Verticaly.The的问题是如果我给骰子包装器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>
回答 1
Stack Overflow用户
发布于 2019-11-07 18:07:06
试试这个答案。在这里，我通过一个具有.dies类的父.die包装了div 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58746009
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号