1

how to center vertically the point/icon circle compared with the lines ? (already apply the code from post "CSS technique for a horizontal line with words in the middle" which did not help me in this case) and margin-top is not moving the circle/point higher. My goal is to get the point on the bar and centered on the bar.

here is my code :

#bar{
height: 1px;
background-color: #000; 
width: 15%;
bottom: 30px;
margin-left: 360px;
margin-top: 10px;
}

.bluePoint1 { 
font-size: 3.75rem;
color: #5CABD1;
background-color: #fff; 
margin-left: 20px;
margin-top: 10px;
}

<h1>SERVICES<br />                    
<div id="bar"></div>
<span class="bluePoint1">&bull;</span>
</h1>
Michael Shopsin
  • 2,055
  • 2
  • 24
  • 43
Estelle D.
  • 21
  • 5

1 Answers1

1

You can solve this using Flexbox like this:

#bar {
  height: 1px;
  background-color: #000;
  width: 15%;
  bottom: 30px;
  margin-left: 360px;
  margin-top: 10px;
}

.bluePoint1 {
  font-size: 3.75rem;
  color: #5CABD1;
  background-color: #fff;
  margin-left: 20px;
  margin-top: 10px;
}

.subtitle {
  display: flex;
  align-items: center;
}
<h1>SERVICES</h1>
<span class="subtitle">
  <div id="bar"></div>
  <span class="bluePoint1">&bull;</span>
</span>
Thomas Brd
  • 1,253
  • 9
  • 10
  • thanks it works great ! I also need to place this point in the middle of the bar : I have tried both solutions without any success : modified the margin-left in "bluepoint1" and adding a 2d bar apart from the point. do you have a suggestion ? – Estelle D. Apr 02 '18 at 19:10