CODEWITHSUNDEEP
htmlcsscss-floatvertical-alignment
Jonas Kohl
Jonas Kohl

Reputation: 1142

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?

Upvotes: 2

Views: 150

Answers (2)

Artiom S.
Artiom S.

Reputation: 46

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

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122087

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>

Upvotes: 2

Related Questions