CODEWITHSUNDEEP
cssiconsmove
Estelle D.
Estelle D.

Reputation: 21

how to move a icon on a bar ? (css)

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>

Upvotes: 1

Views: 139

Answers (1)

Thomas Brd
Thomas Brd

Reputation: 1273

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>

Upvotes: 1

Related Questions