Aligner une image [Résolu]

apt · 15/07/2011, 12h12

Bonjour à tous,

J'ai essayé de faire aligner une image avec le texte, mais elle apparait toujours au dessus de la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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">
 
<head>
  <title>Hello!</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!--[if IE]> 
		<link type="text/css" rel="stylesheet" href="css/styles-ie.css" /> 
	<![endif]-->
  <style type="text/css">
		.blocklist .metafirst {
			color:#999;
		}
		.blocklist .metafirst a:link, .blocklist .metafirst a:focus{
			color:#605D5D;
		}
		.blocklist .metafirst a:hover, .blocklist .metafirst a:visited{
			text-decoration:underline;
		}
		.blocklist img.preview{
			margin: 2px 5px 2px 0; 
			padding: 5px; 
			float: left; 
			width: 100px; 
			height: 100px;
		}
		.blocklist img.flag {
			width:16px; height:11px; margin-bottom:-2px; 
		}
		.blokclist img.status {
			width:8px; height:8px; margin-bottom:-2px; 
		}
  </style>
<link href="blocklist.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div class="blocklist">
	<div class="metafirst">
		<span><!--By-->
			<img alt="flag" src="images/fr.gif" class="flag"> | 
			<img alt="status" src="images/online.png" class="status"> 
			<a title="user profil" href="userprofil.html">User | </a> <!--in-->
			<a title="Cat 01" href="cat01.html">Category 01</a>
		</span>
	</div>
</div>	
</body>
 
</html>

Merci de votre aide.

NoSmoking · 15/07/2011, 12h27

Bonjour,
voir la réponse faite ici

apt · 15/07/2011, 12h47

J'ai même essayé avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

vertical-align:baseline;

pour qu'elle descende, mais rien ne se passe !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.blokclist img.status {
			width:8px; height:8px; 
			vertical-align : baseline;
		}

NoSmoking · 15/07/2011, 13h55

Citation:

J'ai essayé de faire aligner une image avec le texte,...

????
text-bottom : Aligne le texte en bas de l'élément conteneur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.metafirst span img {
  vertical-align : text-bottom;
}

apt · 15/07/2011, 16h20

je crois que ça marche mieux avec les marges négatives.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.metafirst span img.status {
			width:12px; 
			height:12px; 
			margin-bottom:-2px;
		}

Ça permet de bien contrôler l'alignement verticale

Merci.

NoSmoking · 15/07/2011, 22h18

Citation:

Envoyé par apt

je crois que ça marche mieux avec les marges négatives.
...
Ça permet de bien contrôler l'alignement verticale

tu fais comme tu le sens mais la propriété vertical-align et les valeurs quelle peut prendre répond parfaitement à ton problème...

Citation:

Envoyé par dixit la spécification CSS2

baseline
Aligne la ligne de base d'une boîte avec celle de son parent. Si la boîte en est dépourvue, aligner le bas de celle-ci avec la ligne de base de son parent
middle
Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent, ce milieu étant augmenté de la moitié de la valeur de la propriété 'x-height' du parent
sub
Abaisse la ligne de base de la boîte à la position appropriée pour une écriture en indice dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément
super
Élève la ligne de base de la boîte à la position appropriée pour une écriture en exposant dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément
text-top
Aligne le haut de la boîte avec le haut du texte de l'élément parent
text-bottom
Aligne le bas de la boîte avec le bas du texte de l'élément parent

apt · 16/07/2011, 13h56

Oui effectivement, ça devrait marcher.

Peut-être que le problème était dans le taille de l'image.

15/07/2011, 12h27	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 942 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 942 Points : 4 768 Points : 4 768	Bonjour, voir la réponse faite ici
	00

16/07/2011, 13h56	#7
apt Membre du Club Inscription : mai 2002 Messages : 526 Détails du profil Informations forums : Inscription : mai 2002 Messages : 526 Points : 42 Points : 42	Oui effectivement, ça devrait marcher. Peut-être que le problème était dans le taille de l'image.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email