CSS - Stylish divider text effect

I am in search of a way to create a separator with text positioned right in the center. When I say center, I mean both horizontally and vertically aligned - there are various methods available such as using pseudo elements or adding an extra span element in the middle.

Below is a snippet of code that I usually use which involves utilizing the span technique:

h2.centre-line
{
   width:40%; 
   text-align:center; 
   border-bottom:0.1rem solid #ccc; 
   line-height:0.1em;
   margin:2.5rem 30%; 
} 

h2.centre-line span
{ 
    background-color:#fff;
    padding:0 1rem; 
}

<h2 class="centre-line"><span>Text</span></h2>

All the examples I have encountered so far have the text placed on a transparent background with margins surrounding it. However, my aim is to position the text within a container of certain height while keeping it centrally aligned.

Thus far, I have struggled to modify my existing code successfully and haven't found any other relevant examples to guide me further.

Any suggestions?

htmlcss

Answer №1

It seems there is some confusion with your request as the purpose of this so-called 'separator' is not clearly defined.

Nevertheless, achieving vertical and horizontal centering can be done using absolute positioning.

To create the 'line behind', a pseudo-element can be used.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.wrap {
  height: 200px;
  position: relative;
  background: lightgrey;
  margin: 5px;
}
h2.centre-line {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  transform: translate(-50%, -50%);
}
h2.centre-line:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  z-index: -1;
  background: red;
}
h2.centre-line span {
  background-color: lightblue;
  padding: 1rem;
  display: inline-block;
}
<div class="wrap">

  <h2 class="centre-line"><span>Text</span></h2>

</div>

Check out this JSfiddle Demo featuring another wrapper with increased height.

Answer №2

Would you like to style your horizontal rule using this code snippet? 

 hr {
        padding: 0;
        border: none;
        border-top: medium double #333;
        color: #333;
        text-align: center;
    }
    hr:after {
        content: "§";
        display: inline-block;
        position: relative; 
        top: -0.7em;  
        font-size: 1.5em;
        padding: 0 0.25em;
        background: white;
    }

Answer №3

<div class="container">
      <hr class="hr-text" data-content="AND">
     </div>

     <style type="text/css">
       .container {
      max-width: 50%;
      margin: 40px auto;
    }

    .hr-text {
      line-height: 1em;
      position: relative;
      outline: 0;
      border: 0;
      color: black;
      text-align: center;
      height: 1.5em;
      opacity: .5;
    }
    .hr-text:before {
      content: '';
      background: linear-gradient(to right, transparent, #818078, transparent);
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
    }
    .hr-text:after {
      content: attr(data-content);
      position: relative;
      display: inline-block;
      color: black;
      padding: 0 .5em;
      line-height: 1.5em;
      color: #818078;
      background-color: #fcfcfa;`enter code here`
    }

     </style>`enter code here`

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

checkbox-activated navigation bar

Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it. Here is the code snippet: <div class="leftside"> <input typ ...

htmlcssnav

Web pages occasionally fail to load HTML files

After embarking on my first HTML and CSS project, I am facing some challenges that I hope someone can help me with. Firstly, my CSS files are not loading properly - could anyone provide insight into why this might be happening? Secondly, I have noticed t ...

htmlcss

Update the background image every minute with a smooth transition effect

I am currently in the process of developing a personal dashboard that requires dynamic background images to change every minute. To achieve this functionality, I have integrated the [Pixabay API][1] and formulated the following API request: https://pixaba ...

javascripthtmljquerycssbackground-image

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

Save webpage as a string in C# using ASP.NET

I am attempting to retrieve the HTML content of an aspx page from another page using the following code snippet: WebClient webClient = new WebClient(); String CompleteReport = webClient.DownloadString(new System.Uri(reportURL)); However, the returned HTM ...

c#htmlasp.net

Using JQuery to Customize Navigation Menu Targeting

On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with a ...

javascriptjqueryhtmlcss

Connecting a remote CSS file to a React component: Step-by-step guide

I am currently working on a React component and I want to incorporate Google's MDL (Material Design Lite) into it. I followed the instructions provided on their website here, which state that I need to link the CSS from their server. However, when I a ...

htmlcssreactjsmaterial-design

Showing Information in an HTML Table

I am new to the world of PHP programming and constantly searching for solutions to my problems. If anyone has any ideas, please share them - I greatly appreciate any help in solving this issue. Within my database table, I have data structured as follows: ...

phphtmlmysql

Execute the executable file on the server and display the output on the client side

Is it feasible to execute an executable file on the web server and display the image on the client side using various technologies like PHP, JS, or HTML? I am interested in achieving this to avoid sharing the exe file directly with the client but still al ...

phphtmlwebserverexe

Overlap of Navigation Bar and Carousel

Encountering an issue. I recently made a modification to my website in hopes of integrating a full-width carousel instead of a jumbotron. However, there seems to be a problem as my navbar is overlapping the jumbotron section along with the caption and oth ...

csstwitter-bootstrap

Conditional Statements in jQuery

Trying to implement a check for the CSS 'display' property being set to "none", then slideDown the element "menuBK". If not, slideUp "menuBK" but encountering an error in my IF statement. $(document).ready(function(){ $("#burger").click(func ...

jquerycssif-statement

I noticed a random gap between the elements with no discernible explanation

<div id="colorscheme"> </div> <div id="content"> <div id="display_saved"> TEXT TEXT TEXT </div> Here is the HTML structure related to a particular document issue. CSS: #colorscheme{ width:25%; display:inline-blo ...

htmlcss

Is there a way to stop jQuery dragging functionality from causing the page to scroll unnecessarily

Whenever I drag an element from div1 to div2, the scrollbar in div1 keeps extending until I drop the element in div2. How can I prevent this extension without breaking the element being dragged? <div class="container-fluid"> <div class="row"> ...

javascriptjquerycssdraggable

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

htmlpost

Ensure that only one Bootstrap 4 collapse is expanded at any given time

I'm working on a project where I have multiple Bootstrap 4 collapse cards in my HTML. I want to ensure that only one card can be open at a time, and if another card is opened, all sibling cards should collapse. Please take a look at my codepen for ref ...

htmljquerybootstrap-4

Issues encountered when attempting to utilize removeEventListener() with multiple elements within a for loop in Javascript

After experimenting, I have been exploring ways to avoid encountering repeated event listeners The script provided below iterates through all buttons with a specific attribute. However, the issue is that it only functions effectively for a single button ...

javascripthtmlevent-listenerremoveeventlistener

Learn the steps to successfully rotate the custom icon in Material-Ui select without impacting its functionality and making sure it remains clickable

I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select. However, I'm facing issues with the new icon not rotating when the menu ...

javascriptcsssvgmaterial-uiicons

Is it possible to run a query directly from HTML code?

I am trying to retrieve data from my table that includes two columns: Judul, Isi. <head><link type="text/css" rel="stylesheet" href="addnewpage.css"/</head> <body> <?php $k = mysqli_connect("local ...

phphtmlmysql

The sticky position is failing to function properly when I set the float property to the left on other

I noticed that the position sticky for the header stops working once I add float:left to another element. The tricky part is, if I remove the float:left from main>div, the sticky header works fine. Despite my efforts to find a solution through Google, n ...

htmlcsscss-floatcss-positionsticky

What is the best way to alter an HTML element using Ruby with Sinatra and Bootstrap?

Below is the content of my index.erb file: <a class="btn" href='javascript:TestFunction()' role="button">TestFunction</a> <script language="javascript"> function TestFunction() { $.post("test_function", { action ...

htmlrubysinatra