Centrer Logo et titre [Réglé]
xela Membre non connecté
-
Modérateur
- Voir le profil du membre xela
- Inscrit le : 26/12/2015
- Groupes :
-
Equipe Rédaction
je suis sur le thème underline et je souhaite centrer le logo ainsi que le titre du site.
La question a surement déjà été posée mais j'ai beau chercher sur le forum, je ne trouve pas de réponse
.J'ai essayé de modifier le design.css en rajoutant un "text-align:center;" dans "div#top-header-content" mais ça ne fonctionne pas.
Merci pour votre éclairage
.Cordialement,
Xela
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
xela Membre non connecté
-
Modérateur
- Voir le profil du membre xela
- Inscrit le : 26/12/2015
- Groupes :
-
Equipe Rédaction
Cordialement,
Xela
xela Membre non connecté
-
Modérateur
- Voir le profil du membre xela
- Inscrit le : 26/12/2015
- Groupes :
-
Equipe Rédaction
après avoir fait de nombreux essais en css (margin, block inline etc) je me suis rendu compte qu'il fallait modifier le mode flex!
Donc voilà la solution, pour centrer les éléments du top header (logo + titre) du thème underline (à voir pour les autres thèmes)
Modif du design.css -div#top-header en rajoutant :
Code CSS :
-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center;
RESULTAT
Code CSS :
/* --- Partie superieure du header --- */ div#top-header { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-direction: row; -ms-flex-direction: row; -webkit-flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; margin: auto; min-height: 100px; max-width: 1150px; }
Les sites qui m'ont aidés :
<a href="http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html">alsacreations - FR</a>
<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_des_bo%C3%AEtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">developer.mozilla - FR</a>
<a href="https://drafts.csswg.org/css-flexbox-1/#auto-margins">drafts.csswg - ENG</a>
<a href="http://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=row&flex-wrap=nowrap&justify-content=center&align-items=flex-start&align-content=center&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto">Box generator 1 - test en ligne des différents paramètres</a>
<a href="http://demo.agektmr.com/flexbox/">Box generator 2 - test en ligne des différents paramètres</a>
olivierb Membre non connecté
-
Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
-
Equipe Assistance
Olivier.
Olivier
Pitipou2000 Membre non connecté
-
Booster Fronde
- Voir le profil du membre Pitipou2000
- Inscrit le : 23/03/2016
- Site internet
Merci beaucoup, ça m'as servi pour mon site. Très sympa le partage.
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie