Member Avatar for bops

Hi guys,

I'm have a right mess about trying to figure out how to do something that would initially seem trivial with HTML and CSS. I am looking to have a centered heading that has a horizontal line stretching from each side of the text to the beginning and end of the container. Something like this:

-------------------------------------- Heading here -------------------------------------

Bearing in mind that the text is of variable length. I've tried many things but the closest I have managed to get is the following (I'm just doing everything inline to test at the moment)

<div style="position: relative; text-align: center; padding: 5px 0;">
    <span class="" style="padding: 0 10px; background-color: #ffffff; z-index: 2;">Some text</span>
    <hr style="height: 1px; width: 100%; border: 0; padding: 0; margin: 0; position: absolute; top: 10px; left: 0; background-color: #000000; z-index: 1;">
</div>

This almost works. The issue is that you can still see the HR line through the text, even though I have tried setting a background colour of white (Essentially I would like this to work no matter what the background colour is though). Does anyone have any idea on how such an effect can be achieved through pure HTML and CSS?

Thanks,
Jonathon

  • 1 Contributor
  • 1 Reply
  • 161 Views
  • 50 Minutes Discussion Span
  • Latest Post Latest Post by bops
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.