How do I align text vertically when it is not in a table cell?

Question

I am working on a mobile site and I have a couple of pages that display a small thumbnail with text to the right: http://sunsetwesterngardencollection.com/mobile/the-collection

The thumbnail positions well, but the text is challenged. I did some research and found one option but it does not seem to work properly.

Here is the HTML for the content:

<ul id="plants">

<li class="plant">
<a href="http://sunsetwesterngardencollection.com/mobile/plant/amistad-salvia"><img src="http://sunsetwesterngardencollection.com/photos/thumbnails/salvia_amistad_thumb.jpg" alt="&#8216;Amistad&#8217; Salvia"  />
<span class="plant-name">&#8216;Amistad&#8217; Salvia</span></a>
<div class="orange-slice"></div>
</li>

<li class="plant">
<a href="http://sunsetwesterngardencollection.com/mobile/plant/black-adder-phormium"><img src="http://sunsetwesterngardencollection.com/photos/thumbnails/phormium_black_adder_thumb.jpg" alt="&#8216;Black Adder&#8217; Phormium"  />
<span class="plant-name">&#8216;Black Adder&#8217; Phormium</span></a>
<div class="orange-slice"></div>
</li>

<li class="plant">
<a href="http://sunsetwesterngardencollection.com/mobile/plant/blue-riding-hood-penstemon"><img src="http://sunsetwesterngardencollection.com/photos/thumbnails/penstemon_blue_riding_hood_thumb.jpg" alt="&#8216;Blue Riding Hood&#8217; Penstemon"  />
<span class="plant-name">&#8216;Blue Riding Hood&#8217; Penstemon</span></a>
<div class="orange-slice"></div>
</li>
</ul>

Here is the CSS:

ul#plants li { 
    width: 100%;
    height: auto;
    position: relative;
 } 

.orange-slice { 
    width: 100%; 
    height: 2px; 
    clear: both;
    background: #e1562e; 
} 

ul#plants li img { float: left; width: 20%; margin: 0; } 

ul#plants li span,
ul#plants li span a:link,
ul#plants li span a:visited { 
    color: #e1562e; 
    font-size: 1.3em; 
    font-weight: 500;
    position: absolute; 
    top: 25%; 
    left: 23%;
    text-transform: uppercase;
    display: table-cell;
    vertical-align: middle;
     }

What is the proper way to align text vertically when it is not in a table cell?

Thanks!

related : http://stackoverflow.com/questions/4005309/div-table-cell-vertical-align-not-working Good explanation : http://css-tricks.com/centering-in-the-unknown/ — Milche Patern, Jun 20 '13 at 18:31

score 3 · Answer 1 · edited Jun 20 '13 at 18:08

3

You make the line-height the same as the height of the element the text is in.

edited Jun 20 '13 at 18:08

orokusaki

55,146
59
179
257

answered Jun 20 '13 at 18:05

Grant Weiss

355
2
12

Sometimes, 1px shorter than the total height of the containing element is desirable. – orokusaki Jun 20 '13 at 18:07
Do you mean the line-height? – forrest Jun 20 '13 at 18:07
In general that works - especially with fixed height. Is there something to modify that in the case of responsive design? – forrest Jun 20 '13 at 18:11
1

If the text ends up wrapping, this solution doesn't work very well. – cimmanon Jun 20 '13 at 18:13
You can add javascript to find the offsetHeight of the element and set the line height to that. If it does end up wrapping, you can set the height to half the element. – Grant Weiss Jun 20 '13 at 18:14

Starboy · Answer 2 · 2013-06-20T18:26:57.273

1

YOU DON'T NEED JAVASCRIPT DO THIS!

So after looking over your code I have a solution along with a couple suggestions.

First lets take a look at what your can do to solve this problem: Let add the following to your css to make the list items act like tables.

#plant.plants { display: table;}

After that lets focus on your containing anchor:

#plant.plants a { display: table-row;}

And finally let's attack the span in which you have said text:

#plant.plants a span { display: table-cell;}

Remove the following rules you have currently on said span

//remove
position: absolute;
top: 25%;
left: 23%;

Now this is going to look a little funky but you can adjust your row by changing your image width. Now onto a suggestion I have, granted I'm not sure if your using 'orange-slice' for a interactive type drop down. But if your just utilizing for stylist purposes I would suggest just adding:

#plant.plants { border-bottom: 2px solid #e1562e; }

edited Jun 20 '13 at 18:26

answered Jun 20 '13 at 18:19

Starboy

1,635
3
19
27

You don't need a table-row element or even a table element, just the table-cells will do: http://cssdeck.com/labs/0vkoyhrc – cimmanon Jun 20 '13 at 18:20
@cimmanon I would agree with you IF the 'anchor' was being cleared before hand. With implementing the 'table-row' you get the clear since he is floating the image. – Starboy Jun 20 '13 at 18:24
1

So remove the float? It isn't necessary here if you modify the markup. – cimmanon Jun 20 '13 at 18:28

How do I align text vertically when it is not in a table cell?

2 Answers2