28173 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement d'une image verticalement et horizontalement

Tout est dans le titre ....
centrer une image dans une div , de façon vertical et horizontal
ps : je n'ai pas trouvé en parcourant le forum ...
Modifié par istrion (30 May 2006 - 23:05)
Bonsoir,
Voila une des techniques de centrage qui est plus utilisée pour le centrage vertical. La valeur des marge suppose que ton image mesure 100x100px.

img {
position:absolute; 
top:50%; 
left:50%; 
margin-top:-50px; 
margin-left:-50px
}

Modifié par Hermann (30 May 2006 - 20:02)
hum presque Smiley smile mais pas en position absolute :

ma div contenante :

.bloc1 {
height: 70px;
width: 100px;
float: left;
border:2px solid #ccc;
padding:1px;
margin: 10px;
text-align:center;
}

j'ai testé avec ceci :

.bloc1 img{
position:relative;
top:50%;
left:50%;
margin-top:-28px;
margin-left:-35px;
}

largeur de l'image : 70px
hauteur : 57px


l'image se positionne parfaitement de façon vertical mais plus horizontalement, si je passe en position absolute , toute les images se retrouve superposé au centre ....

je continus mes recherches Smiley smile


edit : résolut Smiley smile

.bloc1 img{
position:relative;
top:50%;
margin-top:-28px;
}

centrage en position relative grace au text-align center Smiley smile
Modifié par istrion (30 May 2006 - 23:04)
Modérateur
bonjour,

si ta div conteneur ne contient qu'une image, la solution la plus simple est:
.bloc1 {
height: 70px;
line-height:70px; /* aussi longtemps que ça ne passe pas sur 2 lignes ton centrage verticale est effectif */
width: 100px;
float: left;
border:2px solid #ccc;
padding:1px;
margin: 10px;
text-align:center;
}


++

c'est aussi dans la FAQ il me semble . Smiley smile
yop Smiley smile
non en fait j'aurais X .bloc1{} qui contiendront une image de taille fixe mais différente ....
et un rollover pour effectuer diverse action

pour la faq je m'excuse j'ai chercher sur le forum ...

tout mes pardon Smiley confused Smiley confused
Bonsoir,
a écrit :
bloc1 {
height: 70px;
line-height:70px; /* aussi longtemps que ça ne passe pas sur 2 lignes ton centrage verticale est effectif */
width: 100px;
float: left;
border:2px solid #ccc;
padding:1px;
margin: 10px;
text-align:center;
}


@gcyrillus
Non le line-height n'a aucun effet sur le centrage vertical des éléments en ligne de type remplacés. Smiley cligne
Modifié par Hermann (30 May 2006 - 23:42)
Modérateur
<edit>pardon, pour la faq, ce n'etait pas une remontrance mais un rappel qu'il y a la aussi de bonnes ressources Smiley smile </edit>

@Herman Excuse moi de mon ignorance, mais une image n'est-elle pas de type inline, et inserer comme du texte ?

...

heu, oui en effet, j'ai fait l'impasse sur le comportement de IE, il faut un peu de bidouille, finalement.

bout de code (Hors sujet vu que le sujet est resolu) mais ce line-height me titillait Smiley biggrin 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" 

lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<style type='text/css'>

div {
	height:70px;
	width:100px;
	line-height:70px;
	border:1px solid black;
	text-align:center;
	margin:auto;
}

img {
	vertical-align:middle;
}
span.ie {/* rien ! si vide , pas la [smile] */}
</style>

<!--[if lte IE 6]>
<!-- IE 7 hors jeu ou encore a inclure ? -->
<style type='text/css'>
span.ie {
	display:inline-block;/* pour IE */
	height:100%;
	vertical-align:middle;
}
</style>
<![endif]-->
 
</head>
<body>
	<div>
		<span class='ie'></span>
		cou<img src='http://forum.alsacreations.com/icos/dossieron.gif' title='topic alsa !' />cou
	</div>
</body>
</html>

ça ne peut servir que sur une seule ligne avec du texte ou image.

++
Modifié par gcyrillus (31 May 2006 - 00:48)
@gcyrillus
a écrit :
Excuse moi de mon ignorance, mais une image n'est-elle pas de type inline, et inserer comme du texte ?


L'ignorance n'est pas un pêché Smiley cligne Une image comme un champ input, textarea, button principalement sont des élément en-ligne oui mais remplacés, voir http://css.alsacreations.com/Bases-et-indispensables/La-structure-des-balises-bloc-et-en-ligne
Ces élément se comportent comme s'ils étaient dotés de la propriété
display: inline-block qui permet d'afficher un élément sans retour chariot
mais en acceptant les propriété de marges verticales.
Modifié par Hermann (31 May 2006 - 02:31)
Sujet clos
Aller à