How can I center multiple items inside a div vertically using CSS without using flexbox?

Question

I've been looking all over the internet and I've stumbled upon very similar problems but the solutions I've found vary so slightly that they don't work. I'm trying to create a banner for a webpage that has all items vertically aligned to the center without using a flexbox.

I need to align the logo and the name to the left and some buttons to the right. All I need to do now is align them vertically. I created a minimal snippet just to show my problem.

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
}

.banner img {
  float: left;
  width: 40px;
  height: 40px;
}

.banner h1 {
  float: left;
}

.banner button {
  float: right;
  width: 80px;
  height: 40px;
}

<div class="banner">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"/>
  <h1>Title</h1>
  <button>Button 2</button>
  <button>Button 1</button>
</div>

Answer 1

Hope, this solutions solve your problem but it's not actual solutions, it's better you move flex box, or also you can solve it using pading top and bottom.

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
  display: table;
}
.left-col {
  width: 75%;
}
.right-col { min-width: 200px; }
.banner-col {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
}
.banner img {
  display: inline-block;
  width: 40px;
  height: auto;
}
.banner h1 {
  display: inline-block;
}
.banner button {
  width: 80px;
  height: 40px;
  float: right;
}

<div class="banner">
  <div class="banner-col left-col">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"/>
    <h1>Title</h1>
  </div>
  <div class="banner-col right-col">
    <button>Button 2</button>
    <button>Button 1</button>
  </div>
</div>

Answer 2

This can be achieved using a table, which is very supported by any browser. If we don't want to use flexbox

Working example here.

Html -

<section class="banner">
  <table>
    <tr>
    <td> 
      <div>
    <img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"/>
    <h1>Title</h1>
    </div>
  </td>
    <td>
    <nav>
    <button>Button 2</button>
    <button>Button 1</button>
  </nav>
    </td>
    </tr>
  </table>
</section>

Css -

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
}

.banner table{
  height: 100%;
  width: 100%;
}

table tr td:last-of-type {
  text-align: right;
}

table h1{
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

table img.logo {
  vertical-align: middle;
}

Answer 3

A way of positioning vertically in its container is to move the whole banner down its container 50% and then back up by half its own height.

body {
  height: 100vh;
}

.banner {
  background-color: gray;
  width: 100%;
  height: 80px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.banner img {
  float: left;
  width: 40px;
  height: 40px;
}

.banner h1 {
  float: left;
}

.banner button {
  float: right;
  width: 80px;
  height: 40px;
}

<section class="banner">
  <img src="img.png" />
  <h1>Title</h1>
  <nav>
    <button>Button 2</button>
    <button>Button 1</button>
  </nav>
</section>

Note that this method relies on the banner's parent (or at least the first ancestor which has a position set or implied) having some height set. In this case the body has been given the full viewport height. Depending on your use case you may want to put an additional container with 100vh height.

Answer 4

To center multiple items just try this out, I have given 2 solutions.Try both

display: flex;
align-items: center;
justify-content: center;

.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}