HTML h1 is being aligned to bottom of img

4 Views

I have an img and then a h1 beside it in a header. Here is the code: 

<header class="site-header">
  <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo">
  <div class="first-level-header">
    <h1>Name of website</h1>
  </div>
</header><!-- /site-header -->

And the css:

Read More
h1 {
display: inline;
font-family: sans-serif;
color: blue;
}

img.site-logo {
  display: inline;
  padding-top: 10px;
  padding-left: 10px;
  width: 125px;
  height: 125px;
}

My question is: how do I have the h1 stay on the top instead of being aligned to the bottom of the image.

More information: This is a wordpress theme, if that means anything. I have also tried other tons of things, different images, different places in the document, changing the h1 to a p, etc.

Thanks in advance.

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. After testing for hours I found that if you surround the h1 with a div and set the div to vertical-align: top; it works.

    Example:

    HTML:

    <header class="site-header">
  <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo">
  <div class="first-level-header">
    <h1>Name of website</h1>
  </div>
</header><!-- /site-header -->

    CSS:

    .first-level-header {
  display: inline-block;
  vertical-align: top;
}

 h1 {
  font-family: sans-serif;
  color: blue;
}

img.site-logo {
  display: inline-block;
  padding-top: 10px;
  padding-left: 10px;
  width: 125px;
  height: 125px;
}

  3. If you want next to that image follow this css:

    img.site-logo {
  display: inline;
  padding-top: 10px;
  padding-left: 10px;
  width: 125px;
  height: 125px;
  float:left;
}

    If you want above the image follw this html:

    <header class="site-header">
    <div class="first-level-header">
    <h1>Name of website</h1>
  </div>
  <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo">

</header><!-- /site-header -->