将一个项目居中并将另一个项目向右对齐的最简单方法[重复]答案

【问题标题】：Easiest Way To Center One Item and Align Another One to the Right [duplicate]将一个项目居中并将另一个项目向右对齐的最简单方法[重复]
【发布时间】：2022-01-25 08:03:37
【问题描述】：

我有一个包含两个元素的容器。我希望其中一个水平居中，而另一个右对齐/推到容器的右侧。

我尝试使用 FlexBox 并为应该居中的元素设置 margin: auto;，但这使得它的左右边距完全相等，这意味着由于第二个元素占用了一些空间，它没有完全居中（参见 sn -p)。

#container {
  display: flex;
  width: 250px;
  background-color: #2c3e50;
}

#element-1, #element-2 {
  width: 50px;
  height: 50px;
  background-color: #16a085;
}

#element-1 {
  margin: auto;
}

<div id="container">
  <div id="element-1"></div>
  <div id="element-2"></div>
</div>

【问题讨论】：

您可以通过使第二个元素绝对位于右侧来破解解决方案。

标签： html css

【解决方案1】：

这样吗？

#container {
  width      : 250px;
  height     : 50px;
  background : darkblue;
  position   : relative;
  }
#element-1,
#element-2 {
  width      : 50px;
  height     : 50px;
  background : darkgreen;
  position   : absolute;
  top        : 0;
  }
#element-1 {
  right     : 50%;
  transform : translate(50%, 0);
  }
#element-2 {
  right     : 0;
  }

<div id="container">
  <div id="element-1"></div>
  <div id="element-2"></div>
</div>

【讨论】：