Question

我不能将两个物体放到相同的高度。
桌子应该在左边，按钮在中间，但是现在按钮在桌子下面，但是我不知道为什么。

代码：

<div class="container">
<div class="text-center">
    <div>
        <table class="table col-sm-3">
            <thead></thead>
            <tbody id="ranking"><tr id="xOJzQ-ik9pNq3OKbAAAA"><td>1.</td><td style="width:10px" class="align-middle"><div style="background-color:green;width: 10px; height: 10px;"></div></td><td>Name</td><td>0 Pkt.</td></tr><tr id="JaH1T-7XNkBqa2cnAAAB"><td>2.</td><td style="width:10px" class="align-middle"><div style="background-color:RosyBrown;width: 10px; height: 10px;"></div></td><td>dfsdf</td><td>0 Pkt.</td></tr><tr id="jwEfjfA6COOTeG0ZAAAC"><td>3.</td><td style="width:10px" class="align-middle"><div style="background-color:gold;width: 10px; height: 10px;"></div></td><td>ffff</td><td>0 Pkt.</td></tr></tbody>
        </table>
    </div>
    <div>
        <input type="button" class="btn" value="" id="buzzer" style="background-color:red; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;">
    </div>
</div>

编辑：两者都位于顶部，而不是垂直中心。

Answer 1

尝试

<div class="container">
  <div class="text-center row">
    <div class="col-sm-3">
      ...
    </div>
    <div class="col-sm-6">
      <input type="button" class="btn m-auto" value="" id="buzzer" style="background-color:red; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;">
  </div>
</div>

看看JSFiddle

无法使两个物体达到相同的高度

1 个答案: