Centrer des liens et un logo qui sont dans une div

Sous-titre

Sujet résolu

19 juillet 2019 à 17:33:28

Alors voila...

J'ai creer une div de 47px de haut et j'ai ajouté 2 liens et un logo dans la div. mais le probleme est que les liens et les logos ne sont pas centré verticalement...

LE CODE HTML:

<!DOCTYPE html>
<html>
<head>
	<title>title</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<div class="ligne"></div>
	<div class="header">
		<div class="verticalalign">
			<div class="logo"><img src="debut.svg"/></div>
			<div class="searchbar"></div>
			<div class="login"><a href="">Login</a></div>
			<div class="signin"><a href="">SignIn</a></div>
		</div>
	</div>
</body>
</html>

LE CODE CSS:

body
{
	margin: 0px 0px 0px 0px;
}
.ligne
{
	height: 3px;
	width: 100%;
	background-color: darkorange;
}
.header
{
	background-color: #F9F9F9;
	height: 47px;
	width: 100%;
}

J'ai deja essayé le vertical-align: middle; mais sa ne marche pas et sa annule l'effet du flex... Alors comment faire ?

-
Edité par Sand Wraith 19 juillet 2019 à 20:40:13

JosselinRobin

19 juillet 2019 à 21:11:51

* {
 margin: 0;
 padding: 0;
}
.ligne
{
    height: 3px;
    width: 100%;
    background-color: darkorange;
}
.header
{
    background-color: #F9F9F9;
    height: 47px;
    width: 100%;
}

.verticalalign {
 margin: 0 auto;
}

c'est un truc comme ça mais tu devrait tout reprendre je pense et je vois pas d'utilisation de display: flex;

-
Edité par JosselinRobin 19 juillet 2019 à 21:12:39

AbcAbc6

20 juillet 2019 à 1:01:49

Bonsoir à tous,

@JosselinRobin Pour ceci c'est non.

* {
 margin: 0;
 padding: 0;
}

inutile de péter toute les marges surtout sur les éléments qui n'en on pas. Un reset au cas par cas ou utilisation de normalize par exemple.

@Sand Wraith

Je n'ai pas bien compris ce que vous souhaitiez aligner verticalement. Aligner l'image et les liens par rapport à quoi?

Quels sont les dimensions de l'image?

Inutile de width: 100% sur un block qui fait toute la largeur de sont parent par défaut.

PS : La balise <img> ne sort jamais sans son attribut alt obligatoire.

JosselinRobin

20 juillet 2019 à 1:30:10

merci pour normalize je connaissais pas

Sand Wraith

20 juillet 2019 à 16:42:53

@AbcAbc6 Je voudrai les aligner par rapport a la div "header"; . Car les liens apparaissent en haut de la div. mais pour l'image je ne lui ai pas encore donné de dimensions, mais je veut qu'elle soit centré verticalement sur la div automatiquement comme pour les liens;

AbcAbc6

21 juillet 2019 à 2:48:33

Bonjour, ce que tu dis ne corresponds pas à ton code, j'ai mis quelque minute à comprendre. Dans ton premier message tu parles de flex, mais pas dans ta css. Ensuite tu dis que "les liens apparaissent en haut de la div." => J'imagine que tu as appliqué un flex quelque part.

J'en déduis que tu veux aligner tout tes éléments horizontalement et que ceux-ci doivent en plus être centrer verticalement sur la hauteur de .header. Dans ce cas la div verticalalign est de trop.

Utilise la puissance du flexfox, tu as aligné sur l'axe principal tes éléments, reste plus qu'a les centrer sur l'axe secondaire. en code cela donne ceci:

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <link rel="stylesheet" href="style.css" />
    <style> 
    body
{
    margin: 0px 0px 0px 0px;
}
.ligne
{
    height: 3px;
    background-color: darkorange;
}
.header
{
    background-color: #F9F9F9;
    height: 47px;
    display: flex;
    align-items: center;
}
    </style>
</head>
<body>
    <div class="ligne"></div>
    <div class="header">
            <div class="logo"><img src="debut.svg"/></div>
            <div class="searchbar"></div>
            <div class="login"><a href="">Login</a></div>
            <div class="signin"><a href="">SignIn</a></div>
    </div>
</body>
</html>

Si je n'ai pas bien compris, pourrais-tu réexpliquer avec un schéma.

Sand Wraith

21 juillet 2019 à 23:30:24

S'est exactement sa merci.