如何在畫布底部居中放置多個div？

Question

因此，我一直在研究代碼一段時間，但仍然無法使div元素正確地位於我的canvas元素底部的中央。 到目前為止，我所擁有的代碼相對來說比較接近，但是還不足夠。 我在下面發布了相關的CSS片段，如果有人可以給我一些指導，我將非常感激。

#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}

.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
}

Answer 1

添加一個容器div（也為inline-block ，並為其指定text-align: center 。 這將確保所有inline-block div都錨定在頁面中心。

 #container { text-align: center; display: inline-block; } #shapeCanvas { width:800px; height:650px; border:1px solid #000000; display:block; margin: 0 auto; } .styleDiv { color:#FFFFFF; font-family:"Verdana"; background-color:#36648b; border:2px solid #000000; border-radius:5px; padding:5px; display:inline-block; width:150px; height:25px; text-align: center; } 

 <div id="container"> <div id="shapeCanvas"></div> <div class="styleDiv"></div> <div class="styleDiv"></div> <div class="styleDiv"></div> </div>