Reputation: 1657
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.
Upvotes: 0
Views: 5303
Reputation: 4723
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
Updated after latest comment
Just used the post you mentioned and added the image instead of the text...
Upvotes: 4