Search code examples
csshtmlmaterialize

Materialize divier with text in the middle

Hi to all out there familiar with materialize. I would like to make the divider:

<div class="divider"></div>

Look similar to this: Text divider

It is basically the divier with text in the middle. Does anyone have a solution? If not with material divier even with other html and css would be fine

Thanks

Solution

  • I am a fan of wrapping the text with a div with a fixed height. Then position: relative the text inside the div. See the snippet below. 

    .wrapper {
  background-color: black;
  height: 1px;
  margin: 32px 0 0;
  text-align: center;
}

span {
  position: relative;
  top: -8px;
  padding: 0 15px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 1em;
  color: #000000;
  background: #ffffff;
}
    <div class="wrapper">
  <span>OR</span>
</div>