18041 sujets

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

[Résolu] Impossible de centrer ! T_T

Bonjour,

Je suis en train de créer mon premier site et je n'arrive pas à centrer mon logo dans une section, j'ai tout essayé :
- margin : auto
- margin : 25px auto 25px auto
- margin-left 50% et margin-right : 50%
- position : absolute left 50% right 50% ( le pire résultat, ça annule les propriétés de mon logo (border etc.)
- text-align : center

Je ne sais plus que faire, help pleaaaaaaaaaaaase ! Smiley bawling
Bonjour,

Est-il possible d'avoir le code HTML, l'ensemble du code CSS, l'idéal étant de fournir une page de test en ligne (pour avoir accès à l'ensemble du code et aux images) ?

Merci.
Bonjour,
Je me permets une précision en passant :
Si tout ça ne fonctionne pas, c'est que - comme le suggère 6l20 - c'est sans doute du côté du fichier HTML qu'il y a un souci...
Néanmoins, - et sauf erreur de ma part - la déclaration fonctionnelle pour centrer un bloc, ce n'est pas "margin: auto;" mais "margin: 0 auto;" Smiley smile
Bonne chance !
Néanmoins, - et sauf erreur de ma part - la déclaration fonctionnelle pour centrer un bloc, ce n'est pas "margin: auto;" mais "margin: 0 auto;"

Exact, et il faut que la largeur de l'élément à centrer soit définie. Rhaalala, ces logiciels, faut tout leur dire.
Bonsoir,

@SEGOLENE : juste une petite remarque : la règle n°13 de la FAQ stipule qu'il faut baliser les codes que l'on poste via le bouton code. Pense donc à le faire. Smiley cligne

Concernant ton problème de centrage, je te suggère de lire cet article (fr) qui explique très bien comment faire. Là, on a l'impression que tu testes plusieurs valeurs un petit peu au hasard en espérant que l'une d'entre elles solutionne le problème. L'idéal, c'est de comprendre ce que l'on fait. Smiley cligne

@Reka et thierry : 
margin: auto;
permet de centrer un élément de type block horizontalement à condition que ce dernier ait une largeur. 
margin: 0 auto;
permet de faire la même chose sauf que c'est une notation raccourcie équivalent à : 

margin-top: 0; 
margin-right: auto; 
margin-bottom: 0; 
margin-left: auto;
Bonjour et merci pour vos réponses !
Je suis toujours bloquée Smiley bawling Smiley bawling ...

Voici mon htlm :
<section class="Temoignage">
	
				<a class="logoLD"><img src = "image/Logo2.png" alt= "Logo"/></a>
				<h1 class="LDH1"> Livre d'or  </h1>
				<h2 class="LDH2"> Car vos témoignages sont, pour nous, la plus belle marque de reconnaissance...</h2>
				<p class="livre d'or"> .</p>
	
	</section>


Et mon CSS :

section.Temoignage a.logoLD{
border : 5px solid #FFFFFF;
border-radius: 50%;
background-color : #D7D8D8; 
opacity : 50%; 
padding : 25px ;
box-shadow : 0 5px 15px #190707 ;
display : inline-block ;
margin : 0 auto;
}
Bonjour Ségolène.

Cela ne sert à rien de mettre autant de classe et de id sur tes balises. Tu ne fais que surcharger ton code html inutilement.

Pour pouvoir centrer une balise par un margin, celle-ci doit être de type "block". Mais tu dois aussi donner une dimension à cette boîte.

Voici quelques modifications de ton code :

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Styles.css" />
</head>

<body>
<section>
	<a href="#1"><img width="25px" height="25px" src="image/logo.gif" alt="Logo" /></a>
	<h1>Livre d'or</h1>
	<h2>Car vos témoignages sont, pour nous, la plus belle marque de reconnaissance ...</h2>
	<p>...</p>
</section>
</body>
</html>

Et voici le CSS :
section {
	background-color	: red;
	width			: 500px;
}

section a {
	display			: block;
	margin			: 0 auto;
	padding			: 25px;

	width			: 100px;
	height			: 100px;
	
	background-color	: #D7D8D8; 
	opacity			: 50%; 

	border			: 5px solid #FFFFFF;
	border-radius		: 50%;
	box-shadow		: 0 5px 15px #190707 ;
}

section h1,
section h2 {
	text-align		: center;
}

section p {
	text-align		: left;
	background-color	: green;
}

@+
Modifié par tournikoti (24 Oct 2013 - 19:31)
Bonjour,

il y a encore quelques erreurs dans le code HTML.

<html lang="fr" />


La balise <html> n'est pas une balise auto-fermante.

<a href="#1"><img width="25px" height="25px" src="image/logo.gif" alt="Logo" /></a>


Il ne faut pas indiquer d'unités pour les dimensions dans les attributs width et height de la balise <img /> car sinon ton code ne passera pas la validation du W3C.

Comme ton image est cliquable, rajoute un 
a img {border: none;}
pour supprimer les bordures présentes autour des images cliquables sous Internet Explorer.

Évite aussi de fixer une hauteur fixe à tes éléments car si la hauteur de leur contenu est plus grande que la hauteur que tu as fixé, ça ne va pas aller.

Pense également à bien préfixer, quand c'est nécessaire, certaines propriétés CSS 3.

Par exemple avec la propriété box-shadow.
Modifié par jQzz (24 Oct 2013 - 17:02)
salut,
je pense que le plus simple serait de ne pas se contraindre à avoir des tailles fixes pour centrer.
Dans ton cas, tu pourrais passer à ton lien un simple "diplay:table" qui a la particularité de se comporter comme un "inline-block" pour ne prendre que les dimensions dont il a besoin (et non toute la largeur qui lui est offerte) et en même temps comme un "block" pour occuper à lui seul l'espace horizontal qui lui est offert. Il accepte en plus les marges automatiques (où au passage "margin:auto" marche parfaitement, vu que les valeurs automatiques pour les marges verticales n'existent pas).

.Temoignage>a {
    display:table;
    margin:auto;
}

Il existe plusieurs façons de faire ce que tu souhaites, tu aurais pu passer par un "text-align:center" sur ta <section> mais cela centrera également tes textes et tout autre élément "inline/inline-block".
Merci à tous pour vos réponses ! Smiley cligne

Ça m'a beaucoup aidé! J'ai finalement réussi en utilisant le Display table. Smiley biggrin
Sujet clos
Aller à