Résolu J'ai du mal à aligner verticalement un h1 par rapport à une div en CSS

[Lagger]

Bonjour, bonsoir

Alors voilà j'aimerai aligner verticalement un h1 par rapport à ma div mais je comprends pas ça bug...

<header id="header" class="header">
  <div id="logo" class="logo">
    <img src="img/logo1.png" alt="logo">
    <h1>Lagger</h1>
  </div>
</header>

/*************** HEADER ***************/
#header{
    background: rgba(44, 62, 80,1);
    position: absolute;
    clear: both;
    top: 0;
    right: 0;
    left: 0;
    height: 100px;
    line-height: 100px;
}
#logo img{
    height: 100px;
    position: relative;
    display: inline-block;
}
h1{
    color: rgba(236, 240, 241, 1);
    font-weight: 900;
    font-size: 32px;
    display: inline-block;
}

Merci d'avance

 

[Hichxm]

Mets ton H1 en

float: right;

 

[AwH]

Pourquoi un id et une classe sur tes elements HTML ?

 

[Lagger]

EDIT: j'ai oublié le mot verticalement

Je voudrais mettre mon H1 au centre verticalement dans mon header

 

[AwH]

EDIT: j'ai oublié le mot verticalement

Je voudrais mettre mon H1 au centre verticalement dans mon header

Mais un id + une classe sur le meme element ne sert strictement a rien, sauf si tu veux faire une ancre

 

[Lagger]

Mais un id + une classe sur le meme element ne sert strictement a rien, sauf si tu veux faire une ancre

J'avais l'habitude de faire ça ptdrrr

 

[Rivals]

J'ai édité le titre de ta discussion pour que celle-ci soit plus compréhensible.

A l'avenir essaie de faire des titres plus longs et détaillés, plus le titre est long et détaillé, plus tu obtiendras de vues ainsi que des réponses .

 

[Lagger]

J'ai édité le titre de ta discussion pour que celle-ci soit plus compréhensible.

A l'avenir essaie de faire des titres plus longs et détaillés, plus le titre est long et détaillé, plus tu obtiendras de vues ainsi que des réponses .

Merci chef !

 

[2Thor]

comme ceci ?

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

 

[Lagger]

comme ceci ?

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Oui voilà c'est ça !

 

[2Thor]

Oui voilà c'est ça !

j'ai juste un petit problème avec le pc je le redémarre et je t'envoie sa

 

[Lagger]

j'ai juste un petit problème avec le pc je le redémarre et je t'envoie sa

Merci !

 

[2Thor]

Merci !

Je ne pense pas avoir trouver la meilleure des solutions mais je pense que sa peux convenir tout de même ^^
Code css :

#header
{
background: rgba(44, 62, 80,1);
position: absolute;
clear: both;
top: 0;
right: 0;
left: 0;
height: 100px;
line-height: 100px;
}
#logo img
{
height: 100px;
position: relative;
display: inline-block;
}
h1
{
position: absolute;
left: 80px;
top: -20px;
color: rgba(236, 240, 241, 1);
font-weight: 900;
font-size: 32px;
}

 

[Lagger]

Je ne pense pas avoir trouver la meilleure des solutions mais je pense que sa peux convenir tout de même ^^
Code css :

#header
{
background: rgba(44, 62, 80,1);
position: absolute;
clear: both;
top: 0;
right: 0;
left: 0;
height: 100px;
line-height: 100px;
}
#logo img
{
height: 100px;
position: relative;
display: inline-block;
}
h1
{
position: absolute;
left: 80px;
top: -20px;
color: rgba(236, 240, 241, 1);
font-weight: 900;
font-size: 32px;
}

Malheureusement ça donne ceci:

Je pense que ça vient ailleurs dans mon code, si je te le passe en privée tu peux regarder?

 

[2Thor]

Malheureusement ça donne ceci:

Je pense que ça vient ailleurs dans mon code, si je te le passe en privée tu peux regarder?

Si tu veux mais je trouve sa bizarre car j'avais pareil lorsque que tu m'a passe le code :/