水平对齐边距，同时不会失去垂直对齐

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>

将这些项目与左右边距对齐的最简单方法是什么？我可以用桌子做，但这不是理想的方式吗？

[！[模态示例] [2]] [2]

Answer 1

如果没有看到你的代码，我会使用flex布局。 flex row中的关键是使用justify-content: space-between将行中的2个子项推送到远边。然后，父级上的align-items将设置垂直对齐。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个怎么样？

<div class="row">
    <div class="col-md-6">Dashboard</div>
    <div class="col-md-6 text-right">Cancel Delete</div>
</div>

这会将您的区域分成两列，其中右列的所有内容都将对齐，而不会影响元素本身的CSS。