How do I center aligned vertically the text with my image - html

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">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<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

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"> <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>
Center</h4>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>

Answer 3

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;:
Centered: http://jsfiddle.net/L5Le0w37/16/

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; } 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">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<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