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

Posted 2023-03-24

【中文标题】与边距水平对齐，同时不丢失垂直对齐

【英文标题】：Horizontal alignment to margins while not losing vertical alignment

【发布时间】：2017-09-30 09:51:46

【问题描述】：

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

【问题讨论】：

请发布您的代码并复制您当前在屏幕截图中的内容。

需要看代码

我添加了一个代码示例。真的很简单。挑战在于保持左侧和右侧元素垂直对齐。

【参考方案1】：

没有看到你的代码，我会使用弹性布局。 flex row 中的关键是使用 justify-content: space-between 将行中的 2 个孩子推到最远的边缘。然后父级上的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>

【参考方案2】：

这个怎么样？

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

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