Placing an image in between header words

Question

I was wondering if anyone could help me. I am trying to place an image in between two words in my header. e.g FirstName (Image) LastName. However, every time I try the image shifts the words so that everything is stacking and I want it horizontal. Can anyone help with this? What I have done so far:

<div class="horizontal">
  <h1>FN LN</h1>
  <!-- box-b -->
  <div class="box-b">
    <img src="Images/Triangle.png" alt="Logo mark">
  </div>
  <!-- /box-b -->
</div>

So I'd want the image to move up between the two words.

Add an attribute to `` tag like `style="display:inline"`. If it won't work, try with CSS box model, setting appropriate margin & padding. I think Firefox developer tools might be of some help... — , Apr 27 '18 at 02:31

score 0 · Accepted Answer · answered Apr 27 '18 at 01:17

Images are inline-block elements that should not 'break' your text onto multiple lines, if the issue is alignment, as discussed here you can use vertical-align in CSS to align your image inline with your text.

Like what @Psi mentioned:

<h1>FN <img src="..."> LN</h1>

Should work fine then tweak the CSS for alignment

Placing an image in between header words

FN LN

1 Answers1