Question 410019 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Why dot (•) is not vertically aligned to middle?

enter image description here

I tried to it in many ways, but this the closest to what I’m trying to do. I’ve added "vertical-align" to both elements but still it has some pixels more at the top I guess…

What am I doing wrong? Is there some way to do it? I’ve tried with margins and paddings, but it doesn’t work.

<span style="font-size: 35px; color: #cb141b; line-height: 1px; vertical-align: middle; margin-bottom: 7px;">&bull;</span><span style="vertical-align: middle; ">We... KMC ...</span>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    ChatGPT helped me. Maybe there is some easier way, but this how I've achieved this.

    <span style="font-size: 35px; color: #cb141b; line-height: 1px; vertical-align:middle; position: relative; top: -1px;">&bull;</span><span style="vertical-align: middle; "> We... KMC...</span>

  2. 0

    As you’ve correctly identified, you need:

    vertical-align: middle;

    It’s sufficient to apply that to the bullet.

    N.B. As a phrasing element with a default display of inline, the element <span> usually appears within a block-level text element with a default display of block such as <h2> or <p>.

    Working Example:

    .paragraph {
  font-size: 16px;
}

.bullet {
  color: #cb141b;
  font-size: 35px;
  vertical-align: middle;
}
    <p class="paragraph">
  <span class="bullet">&bull;</span>
  <span class="text">We... KMC ...</span>
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search