How to center text vertically beside a logo?

Fri, 24 Apr 2015 10:47:38 GMT

You've got a sweet logo, but you want a tagline centered vertically beside it.

<header class="logo-container">
  <img class="logo" src="http://placehold.it/200x200">
  <p class="tagline">Clever Tagline</p>
</header>

Chirs Coyier has a wonderful guide to centering things and using the translateY(-50%) technique is appropriate here... but that puts the tagline on top of the logo rather than beside it. Moving the tagline over with the left property puts the tagline exactly where we want it. Final CSS below (jsfiddle):

.logo-container {
  position: relative;
}

.tagline {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* move the tagline beside the logo */
  left: 200px;

  /* no margin/padding for better centering */
  margin: 0;
  padding: 0;
}

Posts tagged web - Entropy and Ecstasy

How to center text vertically beside a logo?