28106 sujets

CSS et mise en forme, CSS3

Bonjour,

Pardon pour le dérangement, mais j'ai une petite question (sans doute) tout bête sur laquelle je bute :

Comment centrer horizontalement le contenu d'une cellule définie en tant que table-cell ?

(Pour centrer verticalement, il y a
vertical-align: middle
; mais horizontalement ?
text-align: center
et
margin-left: auto; margin-right: auto;
ne semblent pas fonctionner.

Merci d'avance de votre aide.
Modérateur
bonjour,

text-align , c'est pour le texte, si il s'agit de centrer des balises de type block, elles occupent 100% de la largeur disponible.

As tu un exemple de code qui démontre ton soucis ?

cdt
Bonsoir gcyrillus,

Merci de ta réponse.

Voici les codes html et css :
<header>
	  
		<p class="titre">Quelques règles de logique arithmétique<br>
		Quand une grandeur G est définie par une fraction</p>
		
  </header>

header {	
	
	width: 740px;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid FireBrick;
}

header p.titre {
	
	display: table-cell;
	vertical-align: middle;
	padding-left:200px;
	height: 60px;
	font-weight: bold;
	font-size: 12px;
	line-height: 25px;
}


Je veux pouvoir centrer le paragraphe horizontalement
Modérateur
Re bonsoir,
tu peut faire depuis le parent:

exemple
header {		
	width: 740px;
	margin-top:10px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid FireBrick;
  display:grid;
  justify-content:center;
}


Cela te fait une grille d'une colonne, pas de soucis si tu en ajoutes un autre, il sera dessous, et le plus large donnera les alignement gauche/droite des autres .

exemple de possibilités https://codepen.io/gc-nomade/pen/ZEezoGd
Modifié par gcyrillus (04 May 2021 - 22:38)