28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS : Problème centrage d'un élément in-line

Bonjour,

J'essaye de centrer un élément de type en-ligne (un type span) au sein d'un fieldset.
Jusque là aucune difficulté, il suffit de définir dans mon css :

.add {
text-align: center;
}


Mon élément est déclaré comme ça dans mon code:
<span class="add">Ajouter un compte</span>


Le problème c'est que le texte "Ajouter un compte" reste désespérément aligné à gauche Smiley decu

Mon span se trouve dans un fieldset pour lequel je n'ai déclaré aucune propriété particulière
    
.info_fieldset {
-moz-border-radius: 7px;
border: 1px #dddddd solid;
margin-bottom: 17px;
}


Lui même se trouve dans un div pour lequel je n'ai même pas d'attribut CSS, lui même dans un form (toujours pas d'attribut CSS), lui même dans un div pour lequel j'ai mis :

#frame {
width: 800px;
margin: 0 auto;
}


C'est un peu mon conteneur "global".

Mon body lui n'a trois fois rien :
body  { padding: 0px; border: 0px none;}


Je précise que j'arrive a centrer avec des balises <center> ou en déclarant mon élément comme un block.

Ça fonctionne :

.add {
display: block;
color:green;
width: 200px;
margin: auto;
}


Mais j'aimerai conserver son type inline et et le centrer pour que ce soit plus propre (et accessoirement pour ma compréhension personnelle)

Avez vous une idée du problème ?
Modifié par 6lings (25 May 2011 - 15:07)
Bonjour,

Est-ce ceci que tu cherches?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Centrer SPAN dans FIELDSET</title>
<style type="text/css">
	fieldset {
		width: 340px;
		margin: 0 auto;
		text-align: center;
	}
	span {
		background:#ffff00;
	}
</style>
</head>
<body>
<fieldset>
	<legend>Test</legend>
	<span>Ajouter le compte</span>
</fieldset>
</body>
</html>

Modifié par lddsoft (25 May 2011 - 15:03)
Oui merci beaucoup !!

Je suis bête c'est pas la première fois que je définit l'attribut sur la balise elle-même au lieu de le faire dans le bloc conteneur !

Ça marche beaucoup mieux comme ça Smiley smile
Merci !
Administrateur
6lings a écrit :

Je suis bête c'est pas la première fois que je définit l'attribut sur la balise elle-même au lieu de le faire dans le bloc conteneur !

Effectivement, les élements de type en-ligne n'occupent que la largeur de leur contenu : il est donc difficile d'y aligner ce contenu.
C'est forcément sur le parent que text-align est à employer, pour aligner le contenu, c'est à dire l'élément inline.
Sujet clos
Aller à