0

I want to draw a horizontal line with image in the middle. I have referred to stack question , it works great for text but when i add image instead of text, it doesn't works for me. Here is the js fiddle

 .footer_bottom { 
    width:100%; 
    text-align:center; 
    border-bottom: 2px solid #cec5ba; 
    line-height:0.1em; 
    margin:10px 0 20px; 
} 
.footer_bottom img { 
    padding:0 10px; 
} 

<div class="footer_bottom"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Google.png/250px-Google.png" alt="Artisan House"></div>

ANy help is really appreciated.

Community
  • 1
  • 1
user930026
  • 1,647
  • 5
  • 34
  • 59
  • I wouldn't call this an answer but maybe it'll help you in some way: http://jsfiddle.net/wB3c6/ – Deryck Jul 05 '14 at 11:58

1 Answers1

4

How about using position:absolute; on the image and play with the margin on the div like this margin:45px 0 20px;

Css:

.footer_bottom img { 
    position:absolute; 
    top:0;
    left:50%;
    margin-left:-125px;
}

Check DEMO

Updated (with white background image & vertical centered)

Add background:white; to the img

DEMO

Updated after latest comment
Just used the post you mentioned and added the image instead of the text...

DEMO 3

Carl0s1z
  • 4,683
  • 7
  • 32
  • 47