Matthew Matt Matthew Matt - 1 year ago 128
CSS Question

Image and Text all in one line

Hey guys I have a page here:

where I want the flag the h3 to be in one perfect line:


<img src="" align="left" />

<h3 style="font-size: 20px; padding-bottom: 5px;">CANADA</h3>

<strong>Film Comm Talent &amp; Model Agency</strong>
Hudson’s Bay Centre
Bloor Street East. Suite 3500
Toronto, ON M4W 1A8
phone: 416-915-3103

I used align="left" to make it happen and work with padding-bottom but no effect.

Any idea how to put them on one line like this perfectly??:

enter image description here

Answer Source

Consider something like:

<div class='canada-wrapper'>
  <img src=''>

And your CSS:

.canada-wrapper {
  // keep absolute positioning of the image within the wrapper
  position: relative;

.canada-wrapper img {
  // position 50% from the top, and offset by -50% using transforms
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);

.canada-wrapper h3 {
  // push the text to the right of the image
  // (fine tune as desired)
  margin-left: 48px;

The magic here is transform: translateY, which will perfectly vertically align the image - regardless of the size of the text next to it. It surprisingly has good cross-browser support (modern browser and IE9+). You'll just need to prefix accordingly with -moz, etc.

JSFiddle (does not include webfonts):

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download