1448 sujets

Web Mobile et responsive web design

Bonjour,
Je me retrouve face à un problème que je ne parviens pas à résoudre, sur mon site je possède une div qui fait 100vh et 100vw elle prend donc toute la taille de la fenêtre et possèdent une image de fond. Sur cette div je souhaite y centrer mon logo (horizontalement et verticalement) qui ce trouve dans une balise <img> et est au format svg.

Voici la partie du code html :

<div class="background">
	<img alt="Logo" src="./images/Logo.svg">
</div>


et le css actuel (j'ai essayé plusieurs technique de positionnement sur le .background img que j'ai supprimé :

.background{
	background: url(../images/background.jpg) center no-repeat fixed;
	background-size: cover;
	height: 100vh;
	position: relative;
}

.background img{
	max-height: 400px;
}


Merci d'avance pour votre aide et bonne soirée
Modérateur
Salut,

Tu peux le faire en flex en mettant sur .background :
display: flex;
position: relative;
align-items: center;
justify-content: center;


Ou positionner l'image en absolute :
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);


Ou positionner l'image comme du texte en mettant dans le .background :
line-height:100vh;
text-align:center;

(mais ça va être gênant s'il y a d'autres élément dans le .background)

Il doit y en avoir d'autre mais je pense que ca suffit.
Merci pour ta réponse rapide,
J'ai essayé les trois techniques que tu m'as proposé,
La première centre correctement le texte horizontalement mais j'ai du utiliser un line-height de 150vh au lieu de 100vh je sais pas trop pourquoi mais ça fonctionne.

La deuxième fonctionnait mais créait une zone vide sur la droite et donc une barre de scroll horizontale.

La troisième ne fonctionnait pas du tout.

Mais du coup la première marche parfaitement merci beaucoup !
Bonne soirée Smiley cligne
J'ai inversé la première et la dernière solution dans ma réponse, enfin bref je pense que tu as compris.
Merci encore.
Modérateur
Si ça ne s'applique pas bien c'est que tu doit avoir du code autour qui change le contexte... parce qu’avec seulement ce que tu as donné comme code j'ai tout testé et tout fonctionne bien Smiley cligne

Mais content que tu ai une solution qui marche du coup.

Bonne journée