CODEWITHSUNDEEP
htmlcss
Roberts Šensters
Roberts Šensters

Reputation: 605

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

This is what i try to make:

enter image description here

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;
}

Upvotes: 2

Views: 1963

Answers (6)

Deepak Yadav
Deepak Yadav

Reputation: 7109

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.sstatic.net/iqHsd.png" alt="" />
  </div>
  <div class="btn-child btn-text">Click Here!</div>
</div>

enter image description here

Upvotes: 0

Siraj Hussain
Siraj Hussain

Reputation: 874

This will work in your case. 

h2 {
     margin: 0 auto;
 }

Upvotes: 0

jonnow
jonnow

Reputation: 858

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/

Upvotes: 0

AsimRazaKhan
AsimRazaKhan

Reputation: 2202

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.sstatic.net/SXklZ.png"/>
   Click Here!</p>
</div>

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

Upvotes: 0

fnune
fnune

Reputation: 5514

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.

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

add this css

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

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

Upvotes: 0

Related Questions