CODEWITHSUNDEEP
htmlcssimage
Nathan Singer
Nathan Singer

Reputation: 49

How to align a picture beside <h1> HTML

I'm trying to create a logo picture next to my title on my website.

Problems:

Could anyone help me?

Here is my code.

    .title img {
        vertical-align:middle;
    }
 <div class="title">
        <h1><b>Ex</b><i>Creations</i></h1>
		<img src="http://placehold.it/100x100" alt="ExCreations logo." width="100px" height="100px">
    </div>
    <div class="wrapper">
        <div class="nav">
            <a href="../"><b>Ex</b><i>Creations</i></a>
            <a href="../Projects"><i>Current Projects</i></a>
            <a href="../error/sitemap">Site <b>Map</b></a>
            <a href="../Questions"><i>Have any questions?</i></a>
        </div>
    </div>

But it doesn't work. Although it does with span. Could anyone fix this but keep the h1?

Upvotes: 0

Views: 336

Answers (2)

Jonathan Z&#250;&#241;iga
Jonathan Z&#250;&#241;iga

Reputation: 645

This is because h1 has 100% width, add the following CSS code:

.title h1 {
  display: inline-block;
}

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206288

h1 is a block-level element (therefore the img wraps into a "new line").

Instead place your <img> tag inside the <h1>

<div class="title">
    <h1>
       <b>Ex</b><i>Creations</i>
       <img src="http://s8.postimg.org/9znb8gixh/logo.png" alt="ExCreations logo." width="100px" height="100px">
    </h1>
</div>

than you can use any vertical-align value for the Logo using

.title h1 img{
   vertical-align: middle; /*https://developer.mozilla.org/en/docs/Web/CSS/vertical-align*/
}

SEO-wise it's also nice to have an image with alt "Logo" inside the primary H1

Upvotes: 2

Related Questions