Divider with centered logo in CSS - strange bug when multiple instances are used

Question

I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this: Divider with logo centered

There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.

A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?

Here is a adapted solution out of that discussion, fiddle below.

CSS:

body {
  margin: 0;
  background: white;
}

header:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}

.logo {
  position: relative; /* Brings the div above the header:after element */
  width: 200px;
  height: 100px;
  padding: 40px;
  margin: 0 auto;
  background: white url("http://placehold.it/200x100") no-repeat center center;
}

.logo img {
  display: block;
}

HTML:

    <body>
      <header>
      <div class="logo">
      </div>

      <div class="logo">
      </div>

      <div class="logo">
      </div>

      </header>
    </body>

The fiddle: http://jsbin.com/delixecobi/edit?html,css,output

score 0 · Answer 1 · answered Jun 09 '17 at 09:49

0

I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.

body {
  margin: 0;
  background: white;
}

.logo:after {
  content: ' ';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: -50%;
  width: 200%;
}

.logo {
  position: relative; /* Brings the div above the header:after element */
  width: 200px;
  height: 100px;
  padding: 40px;
  margin: 0 auto;
  background: white url("http://placehold.it/200x100") no-repeat center center;
}

.logo img {
  display: block;
}

<header>
  <div class="logo">
  </div>
  <div class="logo">
  </div>
  <div class="logo">
  </div>
</header>

Preview

If you want the line not to cross or cut, use a negative z-index.

answered Jun 09 '17 at 09:49

Praveen Kumar Purushothaman

164,888
24
203
252

1

That´s amazing. Thank you! Looks to work just fine. Here is the fiddle with z-index set - just in case people want to use that: http://jsbin.com/dinoligaya/1/edit?html,css,output – nebaon Jun 09 '17 at 10:29
1

One more thing: How to expand the line to cover 100% of the width? Seems to be more complex than I thought. – nebaon Jun 09 '17 at 11:06
@nebaon That's easy. You need another wrapper and put it as `position: relative` – Praveen Kumar Purushothaman Jun 09 '17 at 12:29
Thanks for your support. Sounds quite easy but I can´t get it to work - where is my mistake? http://jsbin.com/punaqivezi/edit?html,css,output – nebaon Jun 10 '17 at 11:06

score 0 · Answer 2 · edited Jun 10 '17 at 00:21

I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image

In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:

divider formats with img, text and text in multiple lines
stable in multiple instances

body {
  margin: 0;
  background: white;
}

.logo:after {
  content: ' ';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: -50%;
  width: 200%;
  z-index: -1;
}

.logo {
  position: relative;
  /* Brings the div above the header:after element */
  width: 200px;
  height: 100px;
  padding: 20px;
  /* also padding between line and logo */
  margin: 0 auto;
  background: white url("http://placehold.it/200x100") no-repeat center center;
}

.logo img {
  display: block;
}

.logotext {
  width: 100%;
  margin: 20 auto;
  overflow: hidden;
  text-align: center;
  font-weight: 300;
  color: green;
  /* color text */
}

.logotext:before,
.logotext:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 20 0 -55%;
  /* 2nd no: space text to line on the left */
  vertical-align: middle;
  border-bottom: 1px solid #ccc;
  /* last: color line */
}

.logotext:after {
  margin: 0 -55% 0 20;
  /* last no: space text to line on the right */
}

span {
  display: inline-block;
  vertical-align: middle;
}

<header>
  <div class="logo">
  </div>
  <div class="logo">
  </div>

  <div class="logotext">
    somesome</div>

  <div class="logotext">
    somesome</div>


</header>

One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.

Divider with centered logo in CSS - strange bug when multiple instances are used

2 Answers2