Align image with text

Question

I've been running into an issue trying to vertically center an image and text together. I cannot get the image to align with the text, and even when I think it is centered, changing the browser size ruins it.

.icon-button-with-text-wrapper {
    border: 1px solid #7e898a;
    background-color: white;
    box-sizing: border-box;
    display: table;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
}
.icon-button-with-text-wrapper img {
    margin-right: 10px;
    max-height: 50px;
    max-width: 50px;
    vertical-align: middle;
    float: left;

}

p {
    vertical-align: middle;
}
}

<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100" style="
    padding-top: 10p;
" align="middle"><p>Speak to an Admissions Counselor<p></div>

I've tried vertical-align: middle, display: table-cell (and others), and different positions, along with adjusting the height, margins, etc. I've also looked at several other similar questions such as this one, this one and this one. However, none of those offered a solution that worked in this instance.

score 1 · Accepted Answer · answered Aug 13 '15 at 17:09

maybe so?

*{
    padding: 0;
    margin: 0;
     box-sizing: border-box;
}

.icon-button-with-text-wrapper {
    border: 1px solid #7e898a;
    background-color: white;   
    display: table;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
}
.icon-button-with-text-wrapper > .item{
    display: table-cell;
    vertical-align: middle;    
}
.icon-button-with-text-wrapper > .item:nth-of-type(1){
    width: 60px;
    text-align: center;
}
.icon-button-with-text-wrapper img {   
    max-height: 50px;
    max-width: 50px;    
}

<div class="icon-button-with-text-wrapper">
    <div class="item">
        <img src="http://i.imgur.com/YjcaGSx.png" alt="" />
     </div>
     <div class="item">  
        <p>Speak to an Admissions Counselor<p>
      </div>
 </div>

Fiddle

score 0 · Answer 2 · answered Aug 13 '15 at 16:11

Hope this will help.

<html>
    <head>
        <title>Flaticon WebFont</title>

        <style>
            .icon-button-with-text-wrapper {
                border: 1px solid #444;
                box-sizing: border-box;
                padding: 10px;
                font-size: 1.0em;
                vertical-align: middle;
                font-size: 1.3em;
            }
            .icon-button-with-text-wrapper img {
                width: 50px;
                height: 50px;
                float: left;
                vertical-align: middle;
                padding: 10px;
            }
        </style>


    </head>

    <body>


        <div class="icon-button-with-text-wrapper">
            <img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png">
            <p>Speak to an Admissions Counselor<p>
        </div>


    </body>
</html>

That works, however the image does not stay centered with the text as the size of the box changes due to the window size. http://i.imgur.com/KFVn2Tj.png — Tanner, Aug 13 '15 at 16:18
you just need to adjust padding of the image then. just put padding-top: (value which fixing the image)px; — Hasan Tareque, Aug 13 '15 at 16:20

score 0 · Answer 3 · answered Aug 13 '15 at 16:11

You don't need to float the image or put the text in its own block (p).

.icon-button-with-text-wrapper {
    border: 1px solid #7e898a;
    background-color: white;
    box-sizing: border-box;
    display: table;
    margin-top: 10px;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    height: 100%;
}
.icon-button-with-text-wrapper img {
    margin-right: 10px;
    max-height: 50px;
    max-width: 50px;
    vertical-align: middle;

}

<div class="icon-button-with-text-wrapper"><img typeof="foaf:Image" src="http://i.imgur.com/YjcaGSx.png" width="100" height="100">Speak to an Admissions Counselor</div>

Unfortunately that does not stay centered as the browser window changes. The image still stays in its place. http://i.imgur.com/Hq9B8Q7.png — Tanner, Aug 13 '15 at 16:16

Align image with text

3 Answers3