Bonjour à tous,
Je débute en CSS3 et je n'ai pas compris comment centrer un élément par rapport à un autre, ceci à pour but que mon site s'adapte dynamiquement à la résolution de l'utilisateur.
J'avais trouvé une solution pour placer verticalement mes éléments mais je me suis rendu compte que c'était appliqué uniquement à ma propre résolution (J'utilisais le position:absolute et me déplaçais via top/right/left/bottom en %).
J'ai simplifié mon code pour que vous compreniez mon problème, ça représente le bandeau qui sera dans l'entête sur lequel plus tard je mettrai un menu pour choisir la langue du site et les informations si l'utilisateur est connecté, et j'ai également mis un logo et les titres que je devrais mettre à mon site.
Voici le code : http://jsfiddle.net/6x98A/9/
Comme vous pouvez le voir la solution marche (pour le bandeau), c'est à force de faire des recherches sur internet que j'ai trouvé ceci mais je ne le comprend pas à 100%.
Surtout en partie sur le vertical-align:top, c'est en bidouillant que j'ai réussi à le centrer de cette manière mais pour moi ça devrait se centrer en mettant vertical-align: middle ou central non ?
J'ai vraiment envie de comprendre pour pouvoir adapter cette solution pour tout le reste du design du site. Je suis bloqué pour centrer mes titres de manière vertical par rapport au Logo.
Je suis reparti sur des position absolute pour les titres car je n'arrive pas à les aligner, j'ai également du mal à pouvoir les déplacer de manière horizontal, c'est pour ça aussi que j'utilise le position:absolute ...
Je vous remercie de prendre de votre temps pour m'expliquer clairement et quel raisonnement à avoir pour le placement.
Partager