L'image du Logo et du titre (H1) sur la même ligne

Je veux créer ma première page web, mais j'ai rencontré un problème.

J'ai le code suivant:

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

Je voudrais savoir comment faire le logo et le H1 pour être dans la même ligne.
Merci!

InformationsquelleAutor Six Quads | 2012-07-28
  1. 73

    Comme exemple (DÉMO):

    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;
}

    DÉMO

    • Arrivés presque même.. 😉
    • Vous le méritez aussi, je suis upvoting vous, vous avez raté le line-height et clear je suppose
    InformationsquelleAutor Danil Speransky
  2. 20

    Essayez ceci:

    1. Mettre les deux éléments dans un conteneur DIV.
    2. Donner que le conteneur à la propriété overflow:auto
    3. Flotter à la fois des éléments vers la gauche en utilisant float:left
    4. Donner le H1 une largeur de sorte qu'il ne prend pas toute la largeur de son conteneur parent.
    InformationsquelleAutor Billy Moat
  3. 12

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

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

    Utiliser CSS pour le style mieux.

    Et il est également conseillé d'effectuer votre logo, un lien hypertexte, l'utilisateur vers la page d'accueil.

    De sorte que vous pouvez faire:

    <h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>
    InformationsquelleAutor Moin Zaman
  4. 6

    Essayez ceci:

    <img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
    InformationsquelleAutor M. Ahmad Zafar
  5. 4

    Il suffit de coller la balise img à l'intérieur de la balise h1 dans le cadre du contenu.

    • Pourriez-vous développer votre réponse? Fournir un exemple, les références, etc...
    • C'est assez explicite et a travaillé pour moi!
    InformationsquelleAutor Dylan
  6. 3

    Vous pouvez le faire comme Billy Douves dit, enveloppez votre <img> et <h1> dans un <div> et l'utilisation float: left; flotter votre image à gauche <div> width et que définir un line-height pour votre h1 et l'utilisation <div style="clear: float;"></div> pour effacer les éléments flottants.

    Violon

    InformationsquelleAutor Mr. Alien
  7. 1

    vous pouvez le faire en utilisant une seule ligne de code..

    <h1><img src="img/logo.png" alt="logo"/>My website name</h1>
    InformationsquelleAutor shreya_js
  8. 1

    C'est mon code sans div à l'intérieur de la balise d'en-tête. Mon but/intention de mettre en oeuvre le même comportement avec un minimum de balises HTML et les feuilles de styles CSS. Elle fonctionne.

    whois.css

    .header-img {
    height: 9%;
    width: 15%;
}

header {
    background: dodgerblue;

}

header h1 {
    display: inline;
}

    whois.html

    <!DOCTYPE html>
<head>
    <title> Javapedia.net WHOIS Lookup </title>
    <link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
    <header>
        <img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
        <h1>WHOIS Lookup</h1>
    </header>
</body>

    de sortie:
    L'image du Logo et du titre (H1) sur la même ligne

    InformationsquelleAutor javapedia.net
  9. 0

    dans votre fichier css ne img { float: left; } et h1 {float: left; }

    InformationsquelleAutor Andy
  10. 0

    Vérifier ce point. 

     .header{width:100%;
    }

    .header img{ width: 20%; //or whatever width you like to have

    }

    .header h1{

    display:inline; //It will take rest of space which left by logo.
}
    InformationsquelleAutor Saqib Omer
  11. 0

    J'utilise bootstrap et définir le html:

    <div class="row">
    <div class="col-md-4">
        <img src="img/logo.png" alt="logo" />
    </div>
    <div class="col-md-8">
        <h1>My website name</h1>
    </div>
</div>
    InformationsquelleAutor RustyIngles
  12. 0
    <head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>
    InformationsquelleAutor satya pati
  13. 0

    Suit:

    1. Surround à la fois les éléments avec un div conteneur.
    2. Ajouter overflow:auto à la div conteneur.
    3. Ajouter float:left vers le premier élément.
    4. Ajouter position:relative; top: 0.2em; left: 24em le deuxième élément (en Haut et à gauche les valeurs peuvent varier selon vous).
    • Bienvenue à Débordement de Pile @Richa Il est toujours préférable de include la source ou references à l'appui de votre réponse et Si possible en why votre réponse œuvres...
    InformationsquelleAutor Richa Mehta