CSS vertical align issue

[baldidiot]

I'm adding a small casino offer section to a sports site and about ready to chuck my laptop out of the window trying to vertically align the text. The annoying thing is I've done this before, just can't for the life of me remember how I did it (or figure out what I'm doing wrong).

Basically I'm trying to make the bonus in the boxes on this page vertically align so it doesn't look weird when it's only on one line such as the virgin games one (most are two and I've fixed the height so the rest of the box is uniform): http://www.bettingoffers.org.uk/casino/

I'm currently using:

position: relative;
top: 50%;
transform: translateY(-50%);

But it doesn't seem to be working the way I want it to.


Any css gurus know what I'm doing wrong?

[banjo]

on the a tag

vertical-align: middle;
line-height: 56px;

line height 2x what is set on the other boxes. so you'll need to assign this to these one-line boxes on their own, via inline css or a unique class/id

[baldidiot]

Ok cheers, different way to what I was thinking of but that works. Thanks!

[baldidiot]

Actually whilst going to try that I've spotted the error that was stopping my original way from doing it - I was defining the height of the bonus element, whereas I needed to add an additional element around the bonus and define the height of that instead.

eg:

<div class="elementouter">
   <div class="elementinner">Bonus</div>
</div>

For anyone else in the same situation (or me for when I forget again) to get it to work use this:

.elementouter {height:50px}
.elementinner {position: relative;top: 50%;transform: translateY(-50%);}

Probably wouldn't have noticed if it weren't for the fact I went back to add additional classes, so cheers for that.