0

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!

2
  • i think what you are asking is more about photoshop than css... if i am not wrong you are asking for something like(_________pic_________)..then create a image by photoshop and then include it with <img src="" /> at the bottom of your div
    – RbG
    Aug 9, 2013 at 8:21
  • @RitabrataGautam Not quite to be honest. I want the image 'inside' the horizontal rule.
    – Swobbleton
    Aug 9, 2013 at 8:34

5 Answers 5

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/

2
  • Is there any way that you know of to make the line 'dissappear' where the image is? I did this by setting the background-color, but I don't have a solid color as a background. dylanvanheugten.nl
    – Swobbleton
    Aug 9, 2013 at 8:25
  • Yes, add a color to the background rule and perhaps right and left paddings to stop the line a little before the logo. I've updated the example.
    – fiskeben
    Aug 9, 2013 at 9:28
0

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

1
  • This wasn't really what I wanted. Thanks anyway.
    – Swobbleton
    Aug 9, 2013 at 8:27
0

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).

0

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

2
  • Your image is above the line.. You forgot the css in jsfiddle. Aug 9, 2013 at 8:23
  • 1
    @KeesSonnema the code is correct, but i forget to update jsfiddle :D, its fixed now
    – x4rf41
    Aug 9, 2013 at 8:24
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.