Question

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

我有几个按钮，它们在响应式容器内相互串联。

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

基本上显示我正在寻找的内容：https://jsfiddle.net/5bvmnt3j/

在小提琴中假装包装器是响应式的，当浏览器宽度改变时，并使按钮换行，我们得到的布局我在wrapper2类中显示而不是在原始包装类中看到的。< / p>

我知道通常情况下这并不是你期望用css解决方案看到的东西，但是我已经看到了一些非常酷的东西，类似于我所要求的flexbox。（例如Center div on wrapping (when it doesn't fit on the line)）

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

仅包裹中心按钮

2 个答案:

jsFiddle