CSS: afbeelding vertikaal centreren binnen span
11 augustus 2008 - 13:02   
geplaatst door: macvooh
Om bij te leren heb ik vorige week een website in elkaar gestoken.
Niets serieus, mensen kunnen er bepaalde afbeeldingen uploaden volgens thema.

De weergave van de afbeelding gebeurt in een span, binnen een span, binnen een table (is standaard zo door mijn instelling van Drupal).
vb:


<td class="col-1">              
 <span class="views-field-image-size">
         <span class="field-content">
           <a href="link.html">
             <img src="thumbnail.jpg" alt="alt" title="titel" class="image image-thumbnail " width="102" height="140" />
           </a>
         </span>
 </span>
</td>

de css code tot nu toe:


 .views-field-image-size {
 background-color: #FFFFFF;
 display: block;
 text-align: center;
 width: 140px;
 height: 140px
 }

 .views-field-image-size span {
 display: table-cell;
 vertical-align: middle;
 width: 140px;
 height: 140px
 }

ik geraak er maar niet uit  :wacko:
vertikaal centreren lukt, maar dan gaat horizontaal niet meer, en vice versa,
internet explorer is zoals steeds de grote struikelblok.
Heb al gezocht en veel geprobeerd maar het zit me even tot hier, vandaar richt ik mijn vraag even tot de CSS experts op dit forum.


Het liefst verander ik aan het html gedeelte niets, aangezien dit automatisch gegenereerd wordt door drupal modules/views.
btw, de website url: http://users.ezh.be/303Photography

(Bewerkt door macvooh om 13:03, 11-08-2008)

(Bewerkt door macvooh om 14:05, 11-08-2008)

FREAK!
CSS: afbeelding vertikaal centreren binnen span
11 augustus 2008 - 16:55    reactie #1
geplaatst door: macvooh
 :thumbs-up: is gelukt

schoot me opeens te binnen dat ik een table-element wel met vertical-align kan stylen, zodus:


#col1 #col2 #col3 #col4{
 vertical-align: middle;
 width: 140px;
 height: 140px
 }


 .views-field-image-size {
 display: block;
 text-align: center;
 }

das goed niet?

achtergrond instellen gaat wel wat moeilijk.. maar denk dat ik de images zonder achtergrond laat.

(Bewerkt door macvooh om 16:57, 11-08-2008)

FREAK!