Verticaly align image with text

Question

The image that I'm inserting is basically text so I want the image in the same line as of the text. The problem currently is that the image is going slightly higher than that of the text and isn't coming on the same line.

Here is the code snippet:

<Typography component="h1"  variant="h4">
        Welcome to <img width={200} src={logo}></img>
</Typography>

Here is the snapshot for further reference:

score 1 · Answer 1 · answered Nov 12 '20 at 09:11

1

If you can use flex, I would like to recommend to use flex

You can make it easy with it

align-items: center

p{
  display: flex;
  align-items: center;
}

<p>
  vertical aligned
  <img width="32" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/cat-icon.png" />
</p>
<span>
  vertical not aligned
  <img width="32" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/cat-icon.png" />
</span>

answered Nov 12 '20 at 09:11

kyun

9,710
9
31
66

Thanks this seems to work :) – Amit Nov 12 '20 at 09:14
Also, how to add extra space between the word 'to' and the image. The image currently is very close to the word 'to'. – Amit Nov 12 '20 at 09:15
@Amit Add `margin` on `` – kyun Nov 12 '20 at 09:16
Yeah, yeah got it. – Amit Nov 12 '20 at 09:18

score 1 · Accepted Answer · answered Nov 12 '20 at 09:12

1

Many ways to do this, one is to add span tag around "Welcome to" like that <span>Welcome to</span> and add a css class for this span and for img to specify vertical-align: middle;

answered Nov 12 '20 at 09:12

Grégory C

419
2
7
23

Verticaly align image with text

2 Answers2