28211 sujets

CSS et mise en forme, CSS3

Center verticalement un bloc de taille relative

Bonjour,

J'essaie, sans succès, de centrer verticalement un bloc avec du texte.

Voici l'exemple :

http://atac-design.ch/technique.html

J'ai essayé les méthodes qui se trouvent dans la FAQ mais la plupart fonctionne avec des tailles fixes...

J'aimerai que le texte soit centré verticalement par rapport à l'image.

Comment ?

Merci
Modérateur
bonjour,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 Transitional</title><style type='text/css'>.projet {
margin-top: 35px;
margin-left: auto;
margin-right: auto;
width: 720px;
height: auto;
background-color: #00AEFF;
padding: 0px;
}

.projetimage {
width: 250px;
background-color: #00AEFF;
border-right-width: 1px;
border-right-style: solid;
padding: 10px;
text-align: right;
color: white;
}

.projettexte {
margin-left: 15px;
width: 410px;
background-color: #00AEFF;
padding: 2px;
font-size: 13px;
color: white;}

.projettexte p {
border-width: 1px;
border-style: solid;
}

.projet {display:table;}
.projetimage , .projettexte  {display:table-cell;vertical-align:middle;height:100%;
_display:inline;
zoom:1;
vertical-align:middle;
}</style>
</head><body><div class="projet">
<div class="projetimage"><a href="images/technique/t_stone.jpg"><img src="http://atac-design.ch/images/technique/t_stone_min.jpg" class="image" alt="Stonehenge" width="240"></a></div>


<div class="projettexte">
<p>	Dessin 3D du site historique de
Stonehenge en Angleterre selon fascicule de visite pris sur place</p>
</div>





</div>


<div class="projet">
<div class="projetimage"><a href="images/technique/t_utopia.jpg"><img src="http://atac-design.ch/images/technique/t_utopia_min.jpg" class="image" alt="Utopia" width="240"></a></div>


<div class="projettexte">
<p>	Dessin 3D de la villa sous-marine</p>
</div></body></html>



servi ?
Merci beaucoup. Ca marche.

Je vais chercher un peu pour comprendre car j'ai de la peine avec certaines choses.

Encore merci.
Sujet clos
Aller à