Image du logo et titre H1 sur la même ligne

Question

Je souhaite créer ma première page web mais je rencontre un problème.

J'ai le code suivant :

<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>

J'aimerais savoir comment faire pour que le logo et le H1 soient sur la même ligne. Merci de votre réponse.

Answer 1

Par exemple ( DEMO ):

HTML :

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

CSS :

.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

DEMO

Answer 2

Si votre image fait partie du logo, pourquoi ne pas le faire ?

<h1><img src="img/logo.png" alt="logo" /> My website name</h1>

Utilisez le CSS pour améliorer le style.

La meilleure pratique consiste également à faire de votre logo un lien hypertexte qui renvoie l'utilisateur à la page d'accueil.

Vous pouvez donc le faire :

<h1 id="logo"><a href="http://stackoverflow.com/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>

Answer 3

Essayez ceci :

1. Placer les deux éléments dans un conteneur DIV.
2. Donnez à ce conteneur la propriété overflow:auto
3. Les deux éléments sont déplacés vers la gauche à l'aide de float:left
4. Donnez une largeur au H1 afin qu'il n'occupe pas toute la largeur de son conteneur parent.

Answer 4

Essayez ceci :

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>

Answer 5

Il suffit de placer la balise img à l'intérieur de la balise h1 en tant que partie du contenu.