CODEWITHSUNDEEP
htmlcss
user930026
user930026

Reputation: 1657

css technique for a horizontal line with image in the middle

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

Answers (1)

Carl0s1z
Carl0s1z

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

DEMO

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

DEMO 3

Upvotes: 4

Related Questions