如何将文字和图片垂直居中对齐

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