CODEWITHSUNDEEP
htmlcss
Sam Clark
Sam Clark

Reputation: 429

Image Will Not Show Up Next To Text

Here's my code: 

<div id="banner">
  <h1 class="title">Sam Clark</h1> <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
  </div>

The image shows up on a new line... How do I stop this? BTW, I just realized that i dont't need it horizontally centered... sorry.

Upvotes: 0

Views: 791

Answers (3)

animuson
animuson

Reputation: 54729

An <h1> element is a block-level element, which means it will take up the enter width by default. If you want the image to show up on the same line with the text, you need to define it inside the element, with the text.

<h1 align="center" class="title">
    Sam Clark <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" />
</h1>

If you're trying to float the image to the left or right, you need to define it before the <h1> element.

After some playing, I was able to find a way to vertically center the text next to your image while also maintaining the horizontal centering of the text inside the header itself, but it involves adding an additional (non-semantic) element.

<h1 class="title">
    <span><img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" /> Sam Clark</span>
</h1>

h1.title {
    text-align: center;
}
h1.title span {
    display: inline-block;
    line-height: 35px;
}
h1.title span img {
    float: right;
    margin-left: 7px;
}

See the jsFiddle.

Upvotes: 2

j08691
j08691

Reputation: 207891

<h1> elements are block level elements. You can either select a non-block level element (e.g. <span>) or change the style of the <h1> element and set display:inline;.

Ex:

#banner h1.title {
    display: inline;
}

Another option is to put your image within the <h1> tag and then set the vertical-align property of the image to middle.

<div id="banner">
  <h1 align="center" class="title">Sam Clark <img src="Images/twitter.png" width="35" height="35" alt="Twitter" id="twitter-img" style="vertical-align:middle" /></h1>
</div>​

Upvotes: 0

Tyler Crompton
Tyler Crompton

Reputation: 12652

h1 by default shows up with a display value of block. To change this use this CSS:

#banner .h1 {
    display: inline;
}

Upvotes: 0

Related Questions