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>

如何在画布底部居中多个div？

1 个答案: