Image And Text Next To Each Other And In The Middle Of The Div

This is what i try to make: So basically i have a div (button) and i want to create that both image and text is in the middle of the div and next to each other. This is where i'm

Solution 1:

A more elegant solution using display:inline-flex;: https://jsfiddle.net/cfvn5vaq/6/

Adding the following CSS:

.button {
  display:inline-flex;
  align-items:center;
}

And some margins to the inner elements. The button is also completely scalable and responsive. Hope I helped.

Solution 2:

add this css

h2{
  line-height: 22px;
    margin: 0;
}

https://jsfiddle.net/cfvn5vaq/3/

Solution 3:

apply vertical align middle on the image to center the text.

<div class="button">
   <p style="margin: auto">
   <img style="vertical-align:middle" src="http://i.stack.imgur.com/SXklZ.png"/>
   Click Here!</p>
</div>

Fiddle: https://jsfiddle.net/f4xkv3s8/

Solution 4:

Use inline-block for the image and the heading.

img, 
.click_here {
    display: inline-block;
}

This will allow you to move the text away from the image with a margin and let you give the text the correct amount of spacing between itself and the image.

Following this you can lose the float which is pushing the text way over to the right side.

.click_here {
    /* 
     * Remove this
     * float:right;
    */
}

Then, as Asim states above, vertically align the image to the middle of the line:

img {
    vertical-align: middle;
} 

Here's the Fiddle (I also adjusted the padding to put 10px on the left and right as well as the top and bottom on the button: https://jsfiddle.net/cfvn5vaq/7/

Solution 5:

This will work in your case.

h2 {
     margin: 0 auto;
 }