Div containing text above a horizontal line

Question

Div containing text above a horizontal line

Is there a way to achieve this effect using the <hr> tag? I want the content of a div to appear over the <hr>. Any suggestions on how to accomplish this?

I've created a jsfiddle here: http://jsfiddle.net/fnaYs/. I'm struggling to figure out how to place this text inside an image box. Any ideas?

Furthermore, once I achieve the desired layout, I plan to integrate it into Wordpress. Therefore, I want to ensure that the text is contained within a <div> or another element, rather than solely in the css file.

html css

Answer 1

Answer №1

By assigning the position attribute of a variable to relative, you are essentially stating that the element's position is relative to the browser.

Therefore, when specifying top:-5px;, you are instructing the browser to place your element 5 pixels above its intended location.

To achieve this effect, simply set the top attribute for the div in CSS to a negative value, like so:

<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>

Feel free to replace the -5px with your desired adjustment.

Answer 2

By assigning the position attribute of a variable to relative, you are essentially stating that the element's position is relative to the browser.

Therefore, when specifying top:-5px;, you are instructing the browser to place your element 5 pixels above its intended location.

To achieve this effect, simply set the top attribute for the div in CSS to a negative value, like so:

<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>

Feel free to replace the -5px with your desired adjustment.

Answer 3

Answer №2

After some coding, I managed to come up with a solution (although there may be other approaches).

If you want to see it in action, check out this JSFiddle: http://jsfiddle.net/fnaYs/6/

CSS

.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

.box {
    background-color:teal;
    width:100px;
    height:30px;
    position:absolute;
    left: 40%;
    bottom:90%;
    padding-top:20px;

}

HTML

<hr class="line"/>
<div class="box"> Text </div>

Answer 4

After some coding, I managed to come up with a solution (although there may be other approaches).

If you want to see it in action, check out this JSFiddle: http://jsfiddle.net/fnaYs/6/

CSS

.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

.box {
    background-color:teal;
    width:100px;
    height:30px;
    position:absolute;
    left: 40%;
    bottom:90%;
    padding-top:20px;

}

HTML

<hr class="line"/>
<div class="box"> Text </div>

Answer 5

Answer №3

Check out this helpful jsFiddle link for the solution: http://jsfiddle.net/8AbCd/

<hr class="divider" />
<div class="content">Content inside div</div>

Here is the corresponding CSS code:

    hr.divider {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

    .content {
background: blue;
    border: 2px dashed blue;
    width: 150px;
    position: relative;
    top: 50px;
}

This code will give you the desired output as shown in the example.

Answer 6

Check out this helpful jsFiddle link for the solution: http://jsfiddle.net/8AbCd/

<hr class="divider" />
<div class="content">Content inside div</div>

Here is the corresponding CSS code:

    hr.divider {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

    .content {
background: blue;
    border: 2px dashed blue;
    width: 150px;
    position: relative;
    top: 50px;
}

This code will give you the desired output as shown in the example.

Div containing text above a horizontal line

Answer №1

Answer №2

Answer №3

Similar questions

The Bootstrap card becomes compressed when conducting a search within the card grid

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

How can I ensure that my HTML page remains live at all times?

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

What steps do I need to take in order to change an HTML div's background to a black

Can nested divs in an HTML document be styled using Flexbox?

Having trouble setting the background of a div in CSS

Tips on removing pesky favicons

Centered content appears smaller than the surrounding div

Engage the PROTRACTOR refresh function

Tips for adding a cache to a basic website

Issue with Rendering Rapheal Pie Chart in Internet Explorer 9

Unraveling the mysteries of Google web application parameters

The media query targeting a specific max-width and below appears to be malfunctioning

Ways to modify CSS rules by adding or removing the !important declaration in new CSS

What is the best way to hide the select arrow in an input-group using Bootstrap 4?

"Title, background hue 3, and color lined up in a single

Inserting data into a JavaScript database

Clicking on a marker in Google Maps will display the address

Having trouble with elFinder? Encountering an error stating "Undefined is not a function" when attempting to