Jump to content

Problem in aligning picture with text in logo


Recommended Posts

In my webpage I would like to put an image in the text logo I have now. I would like the image to be in the right of mikroviologos.gr.

 

Now the code is:

<div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><div id="l1">mikroviologos.gr</div><div id="l2">Εργαστήριο Μικροβιολογίας</div></a></h1></div>

If I change it to

<div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><div id="l1">mikroviologos.gr<img src="image.png"></div><div id="l2">Εργαστήριο Μικροβιολογίας</div></a></h1></div>

and try to apply some margin-top the whole logo moves.

 

How can I make only the picture move? I want to align it to the text.

 

Thank you!

Link to post
Share on other sites
  • 2 months later...

You shouldn't use div block elements within h1 block element, since img by default is inline, instead of div, use span which is also inline, they should act as text and align side by side. IF width or height is required give these elements display: inline-block;. Using div block elements mean they will break to a new line, and the same for every block element following it, unless there is available width and float is used, but! As already mentioned block element within block header element is not allowed.

Edited by dsonesuk
  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...