Horizontal rule with an image centered - html

Question

I've searched a whole bunch but couldn't find anything that was coming close to it..
I want to have a horizontal line that has an image centered in it..
What's the best way of achieving this with the HR tag or any different way?
This is the image that I want to use: http://www.dylanvanheugten.nl/images/logo.png
Thanks in advance!

Answer 1

This might get you started:
HTML:
<div class="line">
<span class="logo"></span>
</div>
CSS:
.logo {
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
padding: 0 5px;
height: 50px;
width: 50px;
background: #fff url(http://www.dylanvanheugten.nl/images/logo.png) no-repeat 50% 50%;
}
.line {
position: relative;
overflow: visible;
height: 1px;
background-color: #ddd;
border: 1px solid #ddd;
}
Here's a fiddle you can play with: http://jsfiddle.net/4tZLD/1/

Answer 2

You can refer to this article. Maybe you can find a solution that covers all the browsers (or at least the ones you care about):
http://www.sovavsiti.cz/css/hr.html

Answer 3

I think that you want something like this, if I understood right.
http://jsfiddle.net/9yjmU/
HTML:
<div class="image">
<img src="http://www.dylanvanheugten.nl/images/logo.png"/>
</div>
<div class="line">
</div>
CSS:
.image{
text-align: center;
}
.line{
border-top: 1px solid black;
margin-top: -20px;
}
You can see that I used a div with a border-top and a margin-top: -20px; so it's in the center of the image (which looks 40px; height).

Answer 4

HTML:
<div class="line">
<img src="http://www.dylanvanheugten.nl/images/logo.png" class="lineImg">
</div>
CSS:
.line {
border-bottom: 1px solid black;
text-align:center;
height:17px;
margin-bottom:17px;
}
.lineImg {
background-color:white;
padding:0px 5px 0px 5px;
}
see: http://jsfiddle.net/V5wj6/3/
the height and margin-bottom of .line need to be exaclty half the height of img, this way, the image will be vertically centered on the line and the following content wont be directly under the border.
in the .lineImg style the background-color makes it look better by removing the line underneath the img, and the padding gives it some more space, you will have to adjust the background-color to your page

Answer 5

This, hopefully, will finally deliver a simple solution to the never ending quest to centre a horizontally placed graphic and auto locate on resize. The calc() method is supported by most browsers. The below syntax uses a graphic with a 728px width.
Full width = 728px, get 50% = 364px. Then apply the following:
#imagecentre1 {
left : calc(100% / 2 - 364px);
/*rest of syntax */
}
It is important to ensure 'white space' either side of '+' and "-" this to ensure that values, both negative and positive work correctly and for the sake of continuity the practice should apply to '/' and '*'. I'm sure someone will confirm order of execution, from memory it will be +, -, x, /. Calc() has basic features, no 'auto'!!
Expect some limitations. Just give it wirl!