我想知道是否有一种方法可以只用 CSS 来做到这一点，但到目前为止我还没有真正找到任何东西。
我有一些按钮在响应式容器内彼此内联。
然而，当它们换行并且第二个按钮落到新行时，我想将它们居中。有人知道仅使用 css 是否可以实现这一点吗？
一个小提琴基本上显示了我正在寻找的内容：https://jsfiddle.net/5bvmnt3j/
在小提琴中，假装包装器是响应式的，并且随着浏览器宽度的变化，并使按钮换行，我们得到了在wrapper2类中显示的布局，而不是在原始包装器类中看到的布局。
我知道通常情况下，这并不是您期望在仅 css 解决方案中看到的东西，但我在 Flexbox 中看到了一些非常酷的东西，类似于我所要求的。 （例如。换行时居中 div（当它不适合在线时）)
希望避免使用 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>
您可以使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
