CODEWITHSUNDEEP
htmlcss
sam
sam

Reputation: 1087

Horizontal line in the middle of divs

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

enter image description here

I'm trying to do that using the line height, but not able to.

Here's 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/

Upvotes: 23

Views: 60160

Answers (4)

Amaury Hanser
Amaury Hanser

Reputation: 3466

You can use pseudo element, like ::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;
}

Upvotes: 5

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

Here's one where the line is actually on top, but it does add 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>

Upvotes: 5

connexo
connexo

Reputation: 56843

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

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

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

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122145

You can use Flexbox on links and for line you can use :before pseudo-element on 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>

Upvotes: 50

Related Questions