---

 

This How-To pertains to the images in timeslots.

 

 

In theory vertical-align:middle should do the trick, but on some templates that does not center correctly. 

 

So.. vertical centering of the images in a time slot uses css 'top' and 'transform'. 

Setting both to 50% should center correctly, but... not on some templates.

 

For some templates you get images not correctly centered.

 

This might be attributed to the fact that timeslots are css divs that are absolute positioned, using calculated values of size and position based on the slot start/end time and grid time range with minutes transposed to pixels.

 

To make the images center for your template you may need to adjust these CSS values in file sv_apptpro.css:

.sv_gad_timeslot_available img {
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
}

.sv_gad_timeslot_booked img {
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-44%);
    -ms-transform: translateY(-44%);
    transform: translateY(-44%);
}

.sv_gad_timeslot_pending img {
    position: relative;
    top: 45%;
    -webkit-transform: translateY(55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
}

.sv_gad_timeslot_book-off img {
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
}

.sv_gad_timeslot_selected img {
    position: relative;
    top: 45%;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
}

 

To move the image up, decrease the top and increase the transform.

 

#UPDATE#

When I was doing the How-To on switching images, I realized the background-image CSS background-position: center center; works quite well at centering images on some templates.

See /how-to/259-different-images-for-timeslots.html