Centrer verticalement un bloc

Bonjour,

J'ai un petit souci.
J'ai un bloc avec à gauche une image et à droite un picto + un paragraphe en-dessous.
J'aimerais centrer verticalement le picto + le paragraphe par rapport à l'image de gauche.

Voici le code HTML:

<div id="main">
  ...
  <div id="slide1">
      <img class="iphone" src="images/image_diapo3.png" alt="Image iPhone" />
      <img class="picto" src="images/10_image_nouveautesgrand.png" alt="Nouveautés" />
      <p>Les nouveautés philatéliques du monde à portée de main<br />
      dès leur annonce officielle :<br />
      <span class="other_color">organisées selon vos choix de pays et de thèmes préférés.</span></p>
  </div>
  ...
</div>

Et voici le code CSS:

#main
{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	font-family: Helvetica, Arial, sans-serif;
	color: rgb(150,25,20);
	font-weight: bold;
	font-size: 17px;
	overflow: hidden;
}

#slide1
{
	width: 100%;
	margin-top: 20px;
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
}

#slide1 img.iphone
{
	width: 20%;
	float: left;
	padding-left: 20px;
}

#slide1 img.picto
{
	width: 10%;
	float: left;
	margin-top: 60px;
	padding-left: 20px;
}

#slide1 p
{
	width: 62%;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}

Comment faire?

Merci.
Modifié par Yuuko (08 Jun 2012 - 12:46)

bonjour,

une piste: inline-block; avec un peu de préparation , pour le picto ça dépend où tu le veut visuellement et comment <img/>html ou {background}css.

++