how to properly align pipe in ul li elements with backgrounf image

Question

/* I have the following CSS. */

.top-header-one {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
}

.top-header-one:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-header-two {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
}

.top-header-two:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-header-three {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
}

.top-header-three:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-custom-link ul li {
  display: inline-block;
}

.top-custom-link ul li:not(:first-child):before {
  content: "|";
}

<!-- And the following HTML. -->

<div class="top-custom-link">
  <ul>
    <li>
      <a href="#"> <span class="top-header-one"> </span></a>
    </li>
    <li>
      <a href="#"> <span class="top-header-two"> </span></a>
    </li>
    <li>
      <a href="#"> <span class="top-header-three"> </span></a>
    </li>
  </ul>
</div>

I am not able to align pipes with background images.

Here is the jsfiddle https://jsfiddle.net/L7ob2zfp/

score 1 · Answer 1 · answered Jun 05 '20 at 05:12

I think you could try this:

add position: relative to the li, and then add 3 properties for pseudoclass

 position: absolute;
 top: 50%;
 transform: translateY(-50%);

Snippet:

. . .
. . .

.top-custom-link ul li {
  display: inline-block;
  position: relative;
}

.top-custom-link ul li:not(:first-child):before {
  content: "|";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Hope this helps :)

score 1 · Accepted Answer · answered Jun 05 '20 at 05:27

Adding vertical-align: middle; to .top-header-one, .top-header-two and .top-header-three will align the pipe with the background image. Besides, you may remove the unnecessary spaces in between the <span>. See the code snippets comment for change details.

.top-header-one {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
  vertical-align: middle; /* Add vertical-align */
}

.top-header-one:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-header-two {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
  vertical-align: middle; /* Add vertical-align */
}

.top-header-two:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-header-three {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
  vertical-align: middle;  /* Add vertical-align */
}

.top-header-three:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-custom-link ul li {
  display: inline-block;
}

.top-custom-link ul li:not(:first-child):before {
  content: "|";
}

<div class="top-custom-link">
  <ul>
    <li><a href="#"><span class="top-header-one"></span></a></li> <!--Remove spaces btw span -->
    <li><a href="#"><span class="top-header-two"></span></a></li> <!--Remove spaces btw span -->
    <li><a href="#"><span class="top-header-three"></span></a></li> <!--Remove spaces btw span -->
  </ul>
</div>

how to properly align pipe in ul li elements with backgrounf image

2 Answers2