CODEWITHSUNDEEP
htmlcss
dotnetnoob
dotnetnoob

Reputation: 11330

CSS - Separator with text in middle

I need to create a separator with text in the middle. By middle I mean both centered horizontally and vertically - there are many examples of this technique using pseudo elements or an extra span in the middle.

Here's some code I would normally use - uses the span method:

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>

The problem I have with all of the examples I have found so far is that the text is on a transparent background with margin spacing around it. However what I want to do is place the text in a container with height and keep it centered, like this:

enter image description here

At the moment I've been unable to adapt my code sucessfully and not come across any further suitable examples to follow.

Any ideas?

Upvotes: 4

Views: 12930

Answers (3)

Ankit Jindal
Ankit Jindal

Reputation: 35

<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`

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

Your request is a little unclear as it's not stated what this 'separator' is supposed to be separating.

However, vertical & horizontal centering can be achieved by using absolute positioning.

The 'line behind' is achieved by a pseduo-element.

* {
  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>

JSfiddle Demo with another wrapper with greater height.

Upvotes: 2

Michelangelo
Michelangelo

Reputation: 5948

Use an hr? something like this: http://liveweave.com/42IlZQ

 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;
    }

Upvotes: 1

Related Questions