18041 sujets

Questions générales et questions de débutants

[Résolu] Problème centrage CSS

Bonjour tout le monde,
J'aimerai que les deux colonnes de le texte au dessus de mes icônes cliquables soit centré par rapport à celles-ci.
Pour le moment, on voit bien que ce n'est pas le cas et je n'ai trouvé aucune solution viable dans les bouquins que j'utilise pour apprendre.

upload/1660901275-84907-capture.jpg

Voilà le .css correspondant : 
#pieddepage{
	display: flex;
	background-color: rgb(0, 0, 0);
	padding-bottom: 10px;
}
h6{
	font-size: 15px;
	color: white;
	padding: 2px;
	text-align: center;
}
.rubriques{
	padding: 10px;
	flex: 1;
}
.rubriques a{	
	text-align: center;
	padding-right: 100px;
	float: left;
}


Merci par avance pour votre aide,
Cdlt
_laurent a écrit :
Salut,

Si tu pouvais nous donner également le bout de ton HTML qui correspond ca serait top. Voir le reproduire dans un https://jsfiddle.net/

<section id="pieddepage"> <!--Ici j'ouvre ma section pied de page dans laquelle on retrouve toutes les infos importantes mais pas à première vue capitale.-->
			<div class="rubriques">
				<h6>Retrouvez-nous sur :</h6>
					<a href="https://www.instagram.com/locacheteur"> <!--Ici je crée le lien vers Instagram par icône-->
						<i class="fa-brands fa-instagram fa-2x"></i>
						<p>Instagram</p>
					</a>	<!--Ici je ferme la balise du lien vers Instagram par icône-->
					<a href="#">	<!--Ici je crée le lien vers Linkedin par icône-->
						<i class="fa-brands fa-linkedin fa-2x"></i>
						<p>LinkedIn</p>
					</a>	<!--Ici je ferme la balise du lien vers Linkedin par icône-->
					<a href="#">	<!--Ici je crée le lien vers Youtube par icône-->	
						<i class="fa-brands fa-youtube fa-2x"></i>
						<p>Youtube</p>
					</a>	<!--Ici je ferme la balise du lien vers Youtube par icône-->
			</div>
			<div class="rubriques">
				<h6>Contactez-nous :</h6>
					<a href="mailto:l#?subject=Demande de Contact">
						<i class="fa-solid fa-at fa-2x"></i>
						<p>#</p>
					</a>
					<a href="#">
						<i class="fa-solid fa-envelope-open-text fa-2x"></i>
						<p>Formulaire de contact</p>
					</a>
			</div>
		</section>

Voilà tout !
Modifié par LApprenti (19 Aug 2022 - 11:56)
Modérateur
Ah c'est mieux ! Il manquait beaucoup de contexte. Pense bien à poster un max d'infos pour avoir de l'aide Smiley smile

Tes H6 sont très bien centrées, ce sont les liens qui ne suivent pas. Petit passage en flex de .rubrique avec une flex wrap pour le retour à la ligne. Le H6 en width 100% pour qu'il soit seul sur la ligne et les <a> en flex 1 pour qu'ils se partagent la place (et exit les float et padding)

#pieddepage{
	display: flex;
	background-color: 
rgb(0, 0, 0);
	padding-bottom: 10px;
}
.rubriques{
	padding: 10px;
	flex: 1;
  display: flex;
  flex-wrap: wrap;
}
h6{
	font-size: 15px;
	color:white;
	padding: 2px;
	text-align: center;
  width: 100%;
}
.rubriques a{	
	text-align: center;
  flex: 1;
}


https://jsfiddle.net/undless/fuyn846a/

Bonne journée
Meilleure solution
Merci ça marche très bien mais dans une démarche de progression, pouvez vous me dire pourquoi enlever les float (à quoi servaient-ils) et les padding ?
Et qu'est ce qui fait concrètement que ça marche.

Bravo et merci Smiley smile
Modérateur
LApprenti a écrit :
Merci ça marche très bien mais dans une démarche de progression, pouvez vous me dire pourquoi enlever les float (à quoi servaient-ils) ?

Avec grand plaisir oui !

Le float est un moyen de positionnement un peu particulier. Pour la faire court il sort l'élément en question du "flux" (grosse notion la aussi, le flux c'est en gros le positionnement "normal" de tout les éléments du DOM les uns par rapport aux autres) et les autres éléments viennent se caler autour. Cela peut etre très utile pour placer une image dans un texte et que le texte contourne juste l'image par exemple : https://jsfiddle.net/undless/9hbv5oe4/
Le soucis la dedans c'est qu'en sortant du flux, l'élément perd beaucoup de choses notament vis a vis de son comportement dans l'ensemble du DOM comme le fait que son parent ne le prend plus en compte dans sa hauteur par exemple : https://jsfiddle.net/undless/9hbv5oe4/5/

Bref c'est un couteau à double tranchant. A mon sens il y a plus de désavantage que d'avantage et il faut le garder pour des usages très spécifiques sans effets de bords comme les images dans le texte (mais ca reste mon avis perso).

Un article plus complet et certainement plus juste : https://www.alsacreations.com/article/lire/972-float-le-grand-bluff.html

LApprenti a écrit :
et les padding ?

Le padding c'est un espacement, une marge interne ("margin" lui est un espacement externe) : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model/box-model-devtools.png

Ici ils étaient utilisés pour faire de l'espace entre les colonnes pour tenter d'écarter et de centrer mais c'était maladroit car fait d'un seul coté et imprécis car un nombre fixe qui ne peut pas s'adapter à toutes les tailles de fenêtre. Du coup c'était pas centré.


LApprenti a écrit :
Et qu'est ce qui fait concrètement que ça marche.

Le flex ? C'est un positionnement qui réparti tout l'espace dispo entre les éléments de facon automatique. en donnant flex: 1; tout les elements se partagent une part égale de la place disponible (en gros). Pour aller plus loin : https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html

Bonne journée
Merci infiniment Laurent. Vous avez du l'entendre maintes et maintes fois mais vous êtes génial ! Et d'une grande aide. J'ai fait appel à vos connaissances dans un nouveau topic.
Encore merci.
Bonne journée également
:)
Sujet clos
Aller à