Vertical align floated elements of unknown height

问题

I want to create a header with two columns, one for the "brand name" and one for buttons, such as login, sign up etc.

However I can't wrap my head around how to vertical center them inside the header, because the buttons are much taller than the brand name.

I also already stumbled across this question, however the solution suggested there did not resolve my issue.

What I have got so far:

header {
  border: 1px dotted magenta;
}
header:after {
  content: "";
  display: table;
  clear: both;
}

#left {
  background-color: #cfc;
  float: left;
  vertical-align: middle;
}
#right {
  background-color: #ccf;
  float: right;
  vertical-align: middle;
}

button {
  padding: 8px 10px;
}

<header>
  <div id="left">
    My brand name
  </div>
  <div id="right">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</header>

As you can see in the snippet above, the text My brand name is vertically aligned to the top. However, the desired result would be the text being vertically centered inside the header. How can I accomplish this?

回答1:

You can do this with Flexbox, you just need to use align-items: center on header for vertical align.

header {
  border: 1px dotted magenta;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#left {
  background-color: #cfc;
}
#right {
  background-color: #ccf;
}
button {
  padding: 8px 10px;
}

<header>
  <div id="left">
    My brand name
  </div>
  <div id="right">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</header>

回答2:

The are two more solution to achieve that:

Variant 1 with table, works in IE 6+

header {
  border: 1px dotted magenta;
  display: table;
  width: 100%;
}
header:after {
  content: "";
  display: table;
  clear: both;
}

#left {
  display: table-cell;
  vertical-align: middle;
}
#right {
  background-color: #ccf;
  float: right;
  vertical-align: middle;
}

button {
  padding: 8px 10px;
}

<header>
  <div id="left">
    My brand name
  </div>
  <div id="right">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</header>

or look here https://codepen.io/artysimple/pen/XeEjbj?editors=1100

Variant 2 with position and transformer works in IE 9+

header {
  border: 1px dotted magenta;
  position: relative;
}
header:after {
  content: "";
  display: table;
  clear: both;
}

#left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #cfc;
  float: left;
  vertical-align: middle;
}
#right {
  background-color: #ccf;
  float: right;
  vertical-align: middle;
}

button {
  padding: 8px 10px;
}

<header>
  <div id="left">
    My brand name
  </div>
  <div id="right">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</header>

or look here https://codepen.io/artysimple/pen/dVmpXd

来源：https://stackoverflow.com/questions/46632226/vertical-align-floated-elements-of-unknown-height

标签

html

css

css-float

vertical-alignment