仅环绕中心按钮

Posted 2023-03-05

【中文标题】仅环绕中心按钮

【英文标题】：Center buttons on wrap only

【发布时间】：2017-05-05 02:46:52

【问题描述】：

我想知道是否有办法只使用 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>

【问题讨论】：

一个基于初始答案的注释，但我希望在按钮包裹之前，它们彼此相邻，就像您期望两个内联元素一样。

媒体查询，也许吧？不然没有js……不知道有没有解决办法……

是的，由于页面上使用包装器的方式，媒体查询对我来说真的不起作用。不过，谢谢你的建议。我猜这可能是不可能的。

【参考方案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>

【讨论】：

不确定是否需要 flexbox，如果将使用媒体查询：jsfiddle.net/5bvmnt3j/3

@sinisake，flexbox 可能不是必需的。我使用它是因为 OP 似乎想了解 flex，它是一种强大且前沿的布局技术。

【参考方案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>


        

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

【讨论】：

对不起，与我在另一个答案中留下的相同点以及对我的问题的评论，但如果可能的话，我希望按钮最初是左对齐的，直到它们换行，然后仅在该点居中.就像我原来的小提琴表演一样，尽管我没有指出。可能的？不过谢谢这个答案。

好的，你可以在它们换行时更改对齐方式，如果按钮的宽度恒定，我已经更新了我的答案和我的小提琴