如何在 <hr> 中间插入一个按钮

Question

我基本上有类似的东西

div {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}

<div>
  <hr>
  <button>
    <hr>
</div>

但它不起作用，我也尝试设置 hr 的样式，但也不起作用。我基本上想要一行，包括一个 hr + 一个按钮 + 一个 hr，（所以 hr 大约是一半大小）都在同一行（行）上，全部居中

任何提示？

谢谢

Answer 1

您可以使用flex: 1onhr的

div {
  display: flex;
  justify-content: center;
  align-items: center;
}
hr {
  flex: 1;
  border: none;
  height: 2px;
  background: black;
}

<div>
  <hr>
  <button>Button</button>
  <hr>
</div>

更新：如果你想改变hr 的宽度，你可以像这个Fiddle一样居中你也可以使用伪元素代替Fiddle