Center div on wrapping (when it doesn't fit on the line)

问题

I am trying to create this layout using only CSS:

When title fits:

When title doesn't fit:

The btn on the right should be centered if it wraps.

---

I tried this:

.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>

But obviously, the btn is still on the right after it wraps. Any idea how to center it when it wraps ? And I'd like to avoid javascript.

Fiddle here: http://jsfiddle.net/b7rvhwqg/

回答1:

Pure CSS solution using a flexbox layout:

Updated Example Here

The trick is to add justify-content: center/flex-wrap: wrap to the parent .container element for horizontal centering. Then adjust the first element's margin-right value to auto in order to prevent the last element from being centered when it's on the same line.

(You may need to resize the browser to see how it adjusts).

.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>

回答2:

There is an issue to achieve this via Pure CSS. The div is already having a float and you want to have a "long title" to accommodate that float and at the same time, you want the other right float to jump and become center. This is currently not possible. I believe, you need to consider media queries, but again, that will be a dependent solution, but your title looks like independent of expanding/contracting.

回答3:

is it ok for you if the title will just fit depending on what width u want?.. for example:

{Logo}Title is toooooooooooooooooooooooooooooooooolong {btn}

it will become like this:

{Logo}Title is tooo... {btn}

it will be cut, then only ". . ." will continue

回答4:

Flexbox is the most suitable for this task:

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

---

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%
    border: 1px solid grey;
}
.block.logo {
    flex-grow: 1;
    border: 1px solid orange;
}
.block.title{
    flex-grow: 10;
    border: 1px solid orange;
}
.right-block {
    flex-grow: 1;
    border: 1px solid orange; 
    text-align: center;
}

http://jsfiddle.net/gmrash/7b8w982t/

回答5:

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

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;    width: 75%;
}
.right-block {
    float: right;
}

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

jsFiddle

来源：https://stackoverflow.com/questions/33877327/center-div-on-wrapping-when-it-doesnt-fit-on-the-line