Image and Text next to each other and in the middle of the div

Question

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 so far: jsFiddle

Code:

        <div class="button">
         <img src="icon.png"/>
         <div class="click_here">Click Here!</div>
        </div>

CSS:

.button {
    max-width: 500px;
    width: 90%; 
    margin:0 auto;
    padding:10px 0;
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #fbfbfb 0%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #45484d 0%,#fbfbfb 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #45484d 0%,#fbfbfb 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    -webkit-box-shadow:0 3px 4px rgba(0,0,0,.3);

}

.click_here {
    display:inline;
    vertical-align: middle;
  float:right;
}

@Abhitalks wonderful! If you can create an answer, i will accept it asap :) — Roberts Šensters, Jan 07 '16 at 13:54
Thanks @roberts. It's good if it helps you. Don't worry about me adding an answer. You could try one of the existing answers, or even add one of your own. — Abhitalks, Jan 07 '16 at 13:56
Possible duplicate of [Vertically align text next to an image?](http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — Stickers, Jan 07 '16 at 14:00

fnune · Accepted Answer · 2016-01-07T13:52:47.293

2

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.

edited Jan 07 '16 at 13:52

answered Jan 07 '16 at 13:45

fnune

5,256
1
21
35

You're welcome, consider hitting the accept button if it worked for you :) – fnune Jan 07 '16 at 14:11

score 0 · Answer 2 · answered Jan 07 '16 at 13:33

0

add this css

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

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

answered Jan 07 '16 at 13:33

Lalji Tadhani

14,041
3
23
40

This will not work as i need. My button is scalable. – Roberts Šensters Jan 07 '16 at 13:36

score 0 · Answer 3 · edited Jan 07 '16 at 13:54

0

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

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

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

edited Jan 07 '16 at 13:54

Abhitalks

27,721
5
58
81

answered Jan 07 '16 at 13:36

AsimRazaKhan

2,154
3
22
36

score 0 · Answer 4 · edited Jan 07 '16 at 14:23

0

This will work in your case.

h2 {
     margin: 0 auto;
 }

edited Jan 07 '16 at 14:23

Soatl

10,224
28
95
153

answered Jan 07 '16 at 13:38

Siraj Hussain

874
9
25

score 0 · Answer 5 · answered Jan 07 '16 at 14:02

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/

score 0 · Answer 6 · answered Jan 07 '16 at 14:34

Use display:table-cell approach! works good

* {
  box-sizing: border-box;
}
.button {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 0;
  background: #45484d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #45484d 0%, #fbfbfb 0%, #e5e5e5 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #45484d 0%, #fbfbfb 0%, #e5e5e5 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #45484d 0%, #fbfbfb 0%, #e5e5e5 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#e5e5e5', GradientType=0);
  /* IE6-9 */
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, .3);
  display: table;
  width: 100%;
  table-layout: fixed;
  /* to prevent firefox bug*/
  padding: 0 15px;
}
.btn-child {
  display: table-cell;
  vertical-align: middle;
}
.btn-img {
  width: 75px;
  height: 75px;
}
.btn-text {
  color: #000;
  text-align: left;
  padding-left: 15px;
}

<div class="button">
  <div class="btn-child btn-img">
    <img src="https://i.stack.imgur.com/iqHsd.png" alt="" />
  </div>
  <div class="btn-child btn-text">Click Here!</div>
</div>

Image and Text next to each other and in the middle of the div

6 Answers6

Linked