jqueryhtmljavascriptanythingslider

AnythingSlider: Vertical align middle text

I am using the AnythingSlider JQuery Content slider and am having a hard time trying to vertically center in the middle a piece of text. I have tried the following but doesn't work.

<li>
    <div style="display:table-cell; vertical-align:middle;"> 
        <h1> THIS IS A TEST!! </h1> 
    </div>
</li>
Solution

  • Do your li-elements have a fixed height? If so you could try using CSS and add "line-height: (same height as li)" and "vertical-align: middle".

    (By the way, I don't think you should be using divs inside a li)

    working example: http://jsfiddle.net/jc7CE/

    CSS:

    li{
float: left;
height: 100px;
width: 100px;
line-height: 100px;
vertical-align: middle;
border: 1px solid red;
padding: 10px;
}