HTML - How do I make text vertical middle in

Question

I want my text to be vertically middle in <p> instead of align to the bottom.

My code:

<p style="color:red;text-align:left;">
  <img src="https://i.ibb.co/zFNxsT4/1.png" width="25"> &nbsp;&nbsp;
  <b>Where Should I go ? </b>
</p>

And the result:

i have tried vertical-align:middle but it doesn't have any changes.
Any other ways that it could make the text vertically align in middle?

@fcalderan thanks! probably the most accurate answer to solve my issue. — hatched, Apr 11 '19 at 09:28

score 1 · Answer 1 · answered Apr 11 '19 at 08:25

1

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on elements.

answered Apr 11 '19 at 08:25

Breaking News

90
7

score 1 · Answer 2 · answered Apr 11 '19 at 08:25

I would use flexbox

I changed your markup a little bit, hope it's alright. It uses <strong> instead of <b> and I gave the image a height aswell.

.flex {
  display: flex;
}

.flex strong {
  align-self: center;
}

<p class="flex">
  <img src="https://i.ibb.co/zFNxsT4/1.png" width="25" height="25"> &nbsp;&nbsp;
  <strong>Where Should I go ? </strong>
</p>

Fiddle demo

jo_va · Accepted Answer · 2019-04-11T08:57:45.463

1

Set vertical-align: middle on the children of your <p> element:

p {
  color: red;
  text-align: left;
}

img { 
  width: 25px;
}

p > * {
  vertical-align: middle;
}

<p>
  <img src="https://i.ibb.co/zFNxsT4/1.png"> &nbsp;&nbsp;
  <b>Where Should I go ?</b>
</p>

edited Apr 11 '19 at 08:57

answered Apr 11 '19 at 08:25

jo_va

13,504
3
23
47

That won't center the `b` element. – Apr 11 '19 at 08:46

score 1 · Answer 4 · answered Apr 11 '19 at 08:27

You could use flexbox to do this. Also, it would be semantically more correct to write your code like this:

.wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.image {
  flex: 0 0 auto;
  width: 25px;
  margin: 0 10px 0 0;
}

<div class="wrapper">
  <img class="image" src="https://i.ibb.co/zFNxsT4/1.png">
  <p style="color:red;">Where Should I go ? </p>
</div>

score 1 · Answer 5 · 2019-04-11T08:44:31.380

There is absolutly no need for tables or any other stuff.

You may use vertical-align: middle. But you need to set the images vertical-align aswell. Otherwise a vertical-align is not specified.

Here is a working version:

HTML

<p style="color:red; text-align:left;">
  <img src="https://i.ibb.co/zFNxsT4/1.png" width="25">
  <b>Where Should I go ? </b>
</p>

CSS

p > img, p > b {
    vertical-align: middle;
}

FIDDLE https://jsfiddle.net/e2y1cL07/

Pro tip:

If I want to row elements side-by-side and automatically want them to move to the parents width, I apply display: inline-block to each children of my parent.

score 0 · Answer 6 · answered Apr 11 '19 at 08:25

0

Try to add flex to your p it will set content inside in the middle:

display: flex;
align-items: center;

answered Apr 11 '19 at 08:25

Zirek

513
3
11
20

HTML - How do I make text vertical middle in

6 Answers6