28172 sujets

CSS et mise en forme, CSS3

Comment centrer un inline-block dans son conteneur ?

Bonjour,

Pour les besoins d'une documentation technique présentant un ensemble de procédures, je voudrais pouvoir placer le titre (de largeur variable) associé à un div Procedure au centre de celui-ci et chevauchant sa bordure supérieure.

Voici donc ce que j'aimerais pouvoir obtenir :


upload/22815-Titredecon.jpg

(Les couleurs sont pour l'instant définies pour le seul test.)


Afin de faciliter au mieux l'écriture de la documentation par le client, le code xhtml doit être limité à l'essentiel :


<div class="Procedure">

<h3>Titre de la procédure (de largeur variable) </h3>

<ol>

<li>Action 1</li>
    
    <li>Action 2</li>
    
    <li>Action 3</li>
    
</ol>

</div>


L'ajustement de la largeur de l'encadrement à celle du titre est obtenu à l'aide d'une propriété display:inline-block (voir le post adressé avant-hier par KelT sur ce sujet).

Le placement du titre sur la bordure supérieure du div est obtenu par float: left; (et non par position: relative; de façon à ne pas avoir de vide entre la bordure et le texte qui suit le titre) :


div.Procedure	h3  {
	display: inline-block;
	float:left;
	margin-top: -36pt;
	margin-bottom: 20pt;
	font-size: 12pt;
	font-weight: bold;
	border: solid 1pt red;
	background-color: #CF9;
	padding: 8pt;
}



Il me reste à trouver le moyen de centrer le titre.
text-align: center ne fonctionne pas, pas plus que margin-left:auto et margin-right:auto.

Pouvez-vous m'indiquer une solution ?

Merci d'avance
Modifié par cadbor (18 Mar 2010 - 18:24)
Administrateur
Hello,

à partir du moment où il est flottant, il ne sera pas possible de le centrer facilement : en retirant cette règle, il suffit de mettre un text-align: center au parent de ton h3

D'ailleurs j'ai un peu de mal à comprendre l'intérêt de vouloir que l'élément soit à la fois flottant à gauche et centré Smiley confus
Modifié par Raphael (18 Mar 2010 - 20:04)
Merci de ta réponse, Raphaël

Effectivement, en supprimant la propriété flottante du titre, text-align:center appliqué au conteneur parent permet de centrer le titre. Mais il est dans ce cas à l'intérieur du parent, sous la bordure du haut.

Le fait que le titre soit flottant me permet de le placer par dessus la bordure supérieure du div parent, comme dans la figure jointe à mon post. (En utilisant position:relative, la place réservée pour le titre en flux normal est trop apparente.) Et il n'existe malheureusement pas de propriété float:center.

Il semble donc que les deux exigences (titre placé par dessus la bordure supérieure et centré) soient incompatibles. Je vais donc a priori abandonner le centrage des titres et les aligner à gauche, avec une marge suffisante, ce qui peut-être facilite la recherche des procédures.


PS : Y a -t-il un moyen de centrer verticalement le titre par rapport à la bordure du haut, quel que soit le nombre de lignes du titre ? (J'ai d'abord réglé la position du titre pour une seule ligne puis me suis aperçu que certains titres nécessitent deux lignes.)
Modifié par cadbor (18 Mar 2010 - 21:54)
Certes, mais il est vrai que ce type de détournement peut être bien pratique pour positionner un élément par rapport à l'élément suivant (ou par rapport à l'élément précédent) dans le code.
Même si, j'en conviens, cette pratique n'est pas très rigoureuse. Smiley cligne
Bonsoir,
tu n'as pas besoin du flottant pour ça,d 'autre part sache que float (avec une valeur autre que none) fait passer le display à block dans ce cas.

cadbor a écrit :

PS : Y a -t-il un moyen de centrer verticalement le titre par rapport à la bordure du haut, quel que soit le nombre de lignes du titre ? (J'ai d'abord réglé la position du titre pour une seule ligne puis me suis aperçu que certains titres nécessitent deux lignes.)


Si la largeur du titre et sa hauteur son variable c'est un peu compliqué si ça doit être compatible pour IE6/7.

Sous IE6 et 7 pour qu'un élément doté d'un dsiplay: inline-block se comporte comme tel, tu dois lui attribuer 

display:inline; zoom:1

Modifié par Hermann (18 Mar 2010 - 22:27)
Merci de ta réponse, Hermann

Il me semble avoir vu cette notion dans le livre de Raphaêl, mais je ne retrouve pas l'endroit. (C'est une notion spécifique à IE, c'est bien cela ?)

Je pense que dans un premier temps, je laisserai tels quels les titres sur deux lignes, ceux-ci étant peu nombreux. Il y aura un petit décalage par rapport à la bordure du haut tout à fait acceptable à mon sens. (Je peux aussi créer une classe pour h3 pour les titres nécessitant deux lignes.)
Sujet clos
Aller à