Aligner une image

**apt** · 15/07/2011, 13h12

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, 13h27

Bonjour,
voir la réponse faite ici

**apt** · 15/07/2011, 13h47

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, 14h55

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, 17h20

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, 23h18

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...

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, 14h56

Oui effectivement, ça devrait marcher.

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

Aligner une image

Positionnement en CSS

Discussions similaires

Partager

Partager