html - 与边距水平对齐，同时不丢失垂直对齐

Question

在 HTML 中，我有两个元素，一个带有文本，一个包含几个按钮。

我希望它们间隔开以对齐左右边距，而不是在中间接触。所以我希望我的文本与左边距对齐，而我的按钮与右边距对齐，不会失去它们的垂直对齐方式。

我也正好在使用 Bootstrap 3。

当我使用pull-left/pull-right, float:left/float:right,或 align="left"/align="right"，这两个元素的垂直对齐方式发生了变化。

配对的代码基本上是这样的:

<div style="width:200px;height:100px">
    Delete dashboard?
    <button class="btn btn-secondary cancel">
        Cancel
    </button>
    <button class="btn btn-danger">
        Delete
    </button>
</div>

将这些元素与左右边距对齐的最直接方法是什么？我可以用 table 来做，但这不是理想的方式吗？

[![模态示例][2]][2]

Answer 1

在没有看到您的代码的情况下，我会使用 flex 布局。 flex row 中的关键是使用 justify-content: space-between 将行中的 2 个 child 推到最远的边缘。然后父级上的 align-items 将设置垂直对齐方式。

.flex {
  display: flex;
}
.col {
  flex-direction: column;
  max-width: 250px;
  border: 1px solid black;
}
.bot {
  border-top: 1px solid #ccc;
  justify-content: space-between;
  align-items: center;
}

<div class="flex col">
  <div>
    <h1>confirm</h1>
  </div>
  <div class="flex bot">
    <p>delete dashboard</p>
    <div>
      <button>cancel</button>
      <button>delete</button>
    </div>
  </div>
</div>