Centrer le texte sur la hauteur par rapport à l'image

**siegekhol** · 03/10/2014, 12h10

Bonjour, je voudrais centrer mon menu de gauche par rapport à la hauteur de l'image. J'ai essayé les trucs proposés sur les fofo avec height..margin-top... mais je n'y arrive pas ;(

Mon css

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
html, body {
  font: 1em/1.2 Droidsans,sans-serif;
  color:#555555;
  height:100%;
  margin:0;
  padding:0;
  background:#DCE3E6;
}
#page {
  width:450px;
  height:600px;
  margin:50em,50em;
  background-color:#FFF;
}
.header {
  padding:0.5em;
  background:#fff;
  border:1px solid #FFF;
}
.header h1{
  margin:0.25em;
  color:#2d2d2d;
  font:1.5em Droidsans,sans-serif;
  text-align: centre;
  font-weight: 700;
 
 
 
}
#section {
  position:relative;
  top:0%;
  width:10em;
  margin:0em;
  padding:0px;
  margin-left:0em;
}
#section a {
  display:inline-block;
  width:10em;
  padding:1em;
  text-decoration:none;
  white-space: pre;
  margin-left:0em;
  border-left:0px solid transparent;
}
#section img {
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin-left:32em;
  border:0;
  padding:0px;
 
}
#liste li {
  list-style:none;
  margin-top:10%;
 
}
#liste li a:hover {
  background:#F0F0F0;
  border-left:2px solid #E4001C;
 
 
}
#liste img {
  display:none;
 
}
#liste a:hover img {
  display:block;
 
}

Mon HTML

Code html :

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
<body>
<div id="page">
  <div class="header">
    <h1></h1>
  </div>
  <div id="section">
    <img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn.jpg?1412317740023" alt="">
    <ul id="liste">
      <li><a href="#"><img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asynUpDown.gif?1412317872356" alt=""><font face="Droid Sans"><font color='#5f5f5f'>• Montée et descente de l'assise par vérin à gaz.</font></font></a></li>
      <li><a href="#"><img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyntranslation.gif?1412317984184" alt=""><font face="Droid Sans"><font color='#5f5f5f'>• Translation d'assise.</font></font></a></li>
      <li><a href="#"><img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn+-.gif?1412318023439" alt=""><font face="Droid Sans"><font color='#5f5f5f'>• Réglage d'assise en négatif / positif.</font></font></a></li>
      <li><a href="#"><img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asynchrone.gif?1412318087026" alt=""><font face="Droid Sans"><font color='#5f5f5f'>• Déblocage / blocage du dossier pour contact permanent.</font></font></a></li>
      <li><a href="#"><img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asynUpDown.gif?1412318145599" alt=""><font face="Droid Sans"><font color='#5f5f5f'>• Réglage en hauteur par crémaillère du dossier.</font></font></a>
<li><a href="#"><img src="http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asynUpDown.gif?1412318145599" alt=""><font face="Droid Sans"><font color='#5f5f5f'>• Réglage de la tension du dossier avec une molette.</font></font></a>
</li>
    </ul>
  </div>
</div>
</body>