How to center vertically a html circle entity with the rest of text

user_3044737 0
Viewed 49

I have a lot of links with a circle before the text
problem - the circle is not perfectly centered vertically with the text
it goes slightly bottom
is there a way to fix this ?

.title {
  font-size:2rem;
  display:inline-block;
  vertical-align:middle;
}
<div class='title'>&#9679; LOREM IPSUM</div>

css html
2 Answers

I don't think you can do what you are trying to do with an HTML symbol. To clarify this, I have modified your code a little. a wrapper that contains two div elements. one is the HTML symbol and the other the text. to align the point, I have worked with padding-bottom.

Alternatively, I would work with list-style-type: disc;. Or with custom bullet points.

.wrapper {}

.dot {  
  font-size:1.5rem;
  padding-bottom:20px;
  vertical-align:middle;    
  text-align: center;      
}

.txt {
  font-size:2rem;
}

/* ---------------- */
.alter {
  font-size:2rem;
  display: list-item;    
  list-style-type: disc; 
  list-style-position: inside;
}
<div class="wrapper">
  <span class="dot">&#9679;</span>
  <span class="txt">LOREM IPSUM</span>    
</div>

<p class="alter">LOREM IPSUM 2</p>

user_148071110

They look vertically centered to me, but maybe this will help if you can change your markup? I wrapped your bullet in a span and added display: flex; align-items: center; to your title. Also gave your .title a line-height and the span a bit of right margin for spacing.

.title {
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
}

.title span {
  margin-right: .5rem;
}
<div class='title'><span>&#9679;</span> LOREM IPSUM</div>

user_76690100
Related