Horizontal line in the middle of divs

Question

I want to make a line in the middle of a div. In the following image, the line should be in the middle of the red squares.

I am trying to do this using line height but cannot.

Here is the code:

HTML / CSS:

.wrap { text-align: center; margin: 20px; } .links { padding: 0 10px; border-top: 1px solid #000; height: 1px; line-height: 0.1em; } .dot { width: 20px; height: 20px; background: red; float: left; margin-right: 150px; position: relative; top: -10px; } 

 <div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> 

Demo: https://jsfiddle.net/nkq468xg/

Answer 1

You can use Flexbox in links , and for a string, you can use the :before pseudo-element for a wrap element.

 .wrap { text-align: center; margin: 20px; position: relative; } .links { padding: 0 10px; display: flex; justify-content: space-between; position: relative; } .wrap:before { content: ''; position: absolute; top: 50%; left: 0; border-top: 1px solid black; background: black; width: 100%; transform: translateY(-50%); } .dot { width: 20px; height: 20px; background: red; } 

 <div class="wrap"> <div class="links"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> 

Answer 2

Here's one where the line is actually on top, but it adds another element to the HTML:

https://jsfiddle.net/nkq468xg/2/

 .wrap { text-align: center; margin: 20px; } .links { height: 20px; position: relative; } hr { border: 0; height: 1px; background: black; position: absolute; top: 1px; width: 100%; } .dot { width: 20px; height: 20px; background: red; float: left; margin-right: 150px; } 

  <div class="wrap"> <div class="links"> <hr> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> 

Answer 3

You can use a pseudo-element, for example :after

 .links { padding: 0 10px; overflow: auto; // Your div will have the height of the overflowing elements } .links::after { content: ''; width: 100%; height: 1px; background: black; display: block; position: relative; top: 10px; } 

Answer 4

Check the code snippet in your question here on SO ("Skip snippet code"), is that what you need? Added position: relative; top: -10px; position: relative; top: -10px; in your code for .dot .

 .dot { position: relative; top: -10px; } 

Fiddle: https://jsfiddle.net/nkq468xg/3/