Html 基于子元素的中心div

我有三个钮扣在包装里。正如您在代码片段中看到的，中间的是中等大小的，而左边的更宽，右边的最小。我在这个包装中还有一个标题，它在中间对齐

我试图实现的是基于中间按钮（中等大小的按钮）对齐按钮（在本例中为

.btns

div）。我希望那个按钮在中间，与标题对齐

下面是我希望按钮对齐的图片：

虽然只使用CSS的解决方案更可取，但如果需要，我愿意使用JS

我该怎么做

#内容{
背景：黑色；
宽度：300px；
高度：150像素；
}
#头衔{
填充顶部：30px；
颜色：白色；
文本对齐：居中；
}
.btns>a{
文字装饰：无；
颜色：蓝色；
边框：2倍纯红；
}
#b2{
保证金：自动15px自动15px；
}
.基站{
显示器：flex；
证明内容：中心；
}

标题

您应该为此使用flexbox

display: flex; 
flex-direction: row; 
justify-context: center; 
align-items:center;

---

如果中间链接应该始终位于中间，那么您可以在其上设置

flex:0 0 auto

，并在其他2上设置

flex:1 1 0

。

第一个问题是，您为什么想要这种行为

您可以通过多种不同的方式实现这一点，其中之一就是使用网格。这是可行的，但从设计的角度来看，这不是一个真正令人满意的模式，除非您的用例真的证明了这一点

---

希望这能解决你的问题

你想这样出去吗？@AbhishekPakhare事实上，我在找同一排的三个按钮。你可以在原始问题的照片上看到我的意思。不管怎样，谢谢你的帮助。所以根据图片，你希望你的中间按钮在标题下并对齐中心。对吗？按钮的大小是否需要相等？谢谢！它并不完美，但比我拥有的要好得多。关于你的问题，我试着这样做是因为当我第一次尝试正常对齐时，它有点奇怪，感觉不对，你知道。

#content {
  background: black;
  width: 300px;
  height: 150px;
}

#title {
  padding-top: 30px;
  color: white;
  text-align: center;
}

.btns{
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 1fr auto 1fr;
}

.btns > a {
  text-decoration: none;
  color: blue;
  border: 2px solid red;
}

.b1{
  text-align: right;
}