换行时居中 div（当它不适合在线时）

Question

我正在尝试仅使用 CSS 创建此布局：

当标题合适时：

当标题不合适时：

右边的 btn 如果换行的话应该居中。

---

我试过这个：

.container {
    width: 100%;
    border: 1px solid grey;
    padding: 5px;
}
.block {
    padding: 5px;
    border: 1px solid orange;
    float: left;
}
.right-block {
    float: right;
}

<div class="container">
    <div class="block">Logo</div>
    <div class="block">Title that is too long</div>
    <div class="block right-block">right-btn</div>
    <div style="clear: both"></div>
</div>

但显然，btn 换行后仍然在右侧。知道包裹时如何将其居中吗？我想避免使用 JavaScript。

在这里小提琴： http: //jsfiddle.net/b7rvhwqg/

Answer 1

使用 Flexbox 布局的纯 CSS 解决方案：

此处更新示例

技巧是将justify-content: center/添加flex-wrap: wrap到父.container元素以实现水平居中。然后将第一个元素的margin-right值调整为 ，auto以防止最后一个元素在同一行时居中。

（您可能需要调整浏览器的大小才能看到它如何调整）。

.container {
  width: 100%;
  border: 1px solid grey;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.logo-text {
  display: flex;
  margin-right: auto;
}
.block {
  padding: 5px;
  border: 1px solid orange;
}
.center-block {
  white-space: nowrap;
  margin-right: auto;
}

<div class="container">
  <div class="logo-text">
    <div class="block logo">Logo</div>
    <div class="block text">This title is short.</div>
  </div>
  <div class="block right-block">right-btn</div>
</div>
<div class="container">
  <div class="logo-text">
    <div class="block logo">Logo</div>
    <div class="block text">This title is slightly longer than the other one. This title is longer than the other one...</div>
  </div>
  <div class="block right-block">right-btn</div>
</div>