How do I center aligned vertically the text with my image

Question

I'm trying to vertically centered align the text with my image. Currently, the text looks like it's aligned at the bottom of the image.

Here's my jsfiddle: http://jsfiddle.net/huskydawgs/L5Le0w37/7/

Here's my HTML:

    <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>

<h4 class="title-bar">Apple<br>
    Center</h4>

<ul>
    <li>Gala</li>
    <li>Pink Lady</li>
    <li>Fuji</li>
</ul>
</div>

Here's my CSS:

        .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

h4.title-bar {
    color: #2251a4;
    background: none;
    font-family: 'Arial', inherit;
    font-weight: normal;
    text-transform: none;
    line-height: normal;
    margin: 0;
    padding: 0;
    text-align: left;
}

Answer 1

Try this out. I wrapped the two items you want centered in the div, and then centered the image.

 .wrap { display:inline } .apple_image { vertical-align:middle } .column-resources-box { width: 200px; float: left; margin: 15px; } .column-resources-box img { margin:0 2%; float:left; height:50px; width:50px; } } h4.title-bar { color: #2251a4; background: none; font-family: 'Arial', inherit; font-weight: normal; text-transform: none; line-height: normal; margin: 0 0 0 0; padding: 0; text-align: left; } 

 <div class="column-resources-box"> <div class="wrap"> <a class="apple_image" href="http://en.wikipedia.org/wiki/Apple"> <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /> </a> <h4 class="title-bar">AppleCenter</h4> </div> <ul> <li>Gala</li> <li>Pink Lady</li> <li>Fuji</li> </ul> </div> 

Answer 2

There's a syntax error in your CSS. Here's your CSS, excerpted from the top:

        .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

Notice the extraneous close brace. That seems to be preventing the browser from getting to the remaining CSS.

Fixed: http://jsfiddle.net/L5Le0w37/13/

You can move it down a little to center it with position:relative; top:7px; position:relative; top:7px; :

Centered: http://jsfiddle.net/L5Le0w37/16/

Answer 3

You could use absolute positioning to put things exactly where you want them.

Fiddle: http://jsfiddle.net/t8rL871j/

  .column-resources-box { width: 200px; float: left; margin: 15px; position: relative; } .column-resources-box img { margin:0 2%; height:50px; width:50px; position: absolute; } h4.title-bar { color: #2251a4; background: none; font-family:'Arial', inherit; font-weight: normal; text-transform: none; line-height: normal; margin: 0 0 0 0; padding: 0; text-align: left; position: absolute; top: 10px; left: 60px; } .column-resources-box ul { margin:60px 2%; height:50px; width:70px; position: absolute; } 

 <div class="column-resources-box"> <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a> <h4 class="title-bar">Apple<br> Center</h4> <ul> <li>Gala</li> <li>Pink Lady</li> <li>Fuji</li> </ul> </div> 

Answer 4

I rewrote your code a bit but here's another possible way using top padding..

vertical-align: top;
padding: 4px 0px 0px 0px; /* adjust top padding */

http://jsfiddle.net/Hastig/mj5yzsr7/3/

You can adjust the spacing between Apple and Center with h4.title-bar { line-height: 25px; } h4.title-bar { line-height: 25px; } then adjust the top padding to compensate.

Answer 5

Wrap your text and image inside of a div and style it like this:

HTML

<div class="appleWrapper">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>
    <h4 class="title-bar">Apple<br>Center</h4>
</div>

CSS

.appleWrapper {
    height: 50px;
}
.title-bar {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Check out the online example here