web-dev-qa-db-fra.com

Image du logo et cap 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 en sorte que le logo et le H1 soient dans la même ligne . Merci!

htmlcsspositioninline
45
Six Quads

A titre d'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

66
Danil Speransky

Essaye ça:

  1. Placez les deux éléments dans un conteneur DIV.
  2. Donnez à ce conteneur le dépassement de propriété: auto
  3. Flotter les deux éléments vers la gauche en utilisant float: left
  4. Donnez une largeur au H1 afin qu’il ne occupe pas toute la largeur de son conteneur parent.
20
Billy Moat

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 CSS pour mieux le styler.

Et il est également recommandé de faire de votre logo un hyperlien qui ramène l'utilisateur à la page d'accueil.

Alors tu pourrais faire:

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

Essaye ça:

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

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

4
Dylan

Vous pouvez le faire comme Billy Moat vous l’a dit, placez votre <img> et <h1> dans un <div> et utilisez float: left; pour placer votre image à gauche, définissez la <div>width et définissez un line-height pour votre h1 et utilisez <div style="clear: float;"></div> pour effacer vos éléments flottants.

Fiddle

3
Mr. Alien

vous pouvez le faire en utilisant un seul code de ligne.

<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
1
shreya_js
<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>
0
satya pati

J'utiliserais bootstrap et définirais le code HTML comme suit:

<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>
0
RustyIngles

Ceci est mon code sans div dans la balise d’en-tête. Mon objectif/intention est d'implémenter le même comportement avec des balises HTML minimales et un style CSS. Ça marche.

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>

sortie:  Result

0
javapedia.net

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

0
Andy

Vérifie ça. 

 .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.
}
0
Saqib Omer