仅环绕中心按钮

Question

我想知道是否有办法只使用 CSS 来做到这一点，但到目前为止我还没有真正找到任何东西。

我有几个按钮在响应式容器中彼此内联。

但是，当它们换行并且第二个按钮掉到新行时，我想将它们居中。有人知道这是否可以仅使用 css 吗？

一个基本上显示我正在寻找的东西的小提琴：https://jsfiddle.net/5bvmnt3j/

在小提琴中假装包装器是响应式的，随着浏览器宽度的变化，并使按钮包装，我们得到了我在 wrapper2 类中显示的布局，而不是在原始包装器类中看到的布局。

我知道通常这不是您希望通过纯 CSS 解决方案看到的东西，但我已经看到了一些与我所要求的类似的 flexbox 非常酷的东西。 （例如Center div on wrapping (when it doesn't fit on the line)）

希望避免使用 JS 检测高度变化然后切换类。谢谢。

.wrapper {
  background: red;
  width: 300px;
}
.wrapper2 {
  background: blue;
  margin-top: 30px;
  text-align: center;
  width: 150px;
}
button {
  width: 100px;
}

<div class="wrapper">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>

<div class="wrapper2">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>

Answer 1

您可以使用 flexbox 和媒体查询来做到这一点：

jsFiddle

.wrapper {
  display: flex;
  background: red;
  width: 500px;
}
button {
  margin: 5px;
  padding: 5px;
  width: 100px;
}
@media ( max-width: 700px ) {
  .wrapper { flex-direction: column; align-items: center; }
}

<div class="wrapper">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>

Answer 2

如果按钮具有固定宽度，您可以使用媒体查询来执行此操作。

https://jsfiddle.net/jaxon58/c0Lsrb7o/3/

.wrapper {
  text-align: center;
}        
button {
  width: 200px;
  display: inline-block;
}       
@media(min-width: 420px) {
  .wrapper {
    text-align: left;
  }
}

<div class="wrapper">
  <button>Btn #1</button>
  <button>Btn #2</button>
</div>


        

您需要调整媒体查询和按钮宽度以使其准确。