CODEWITHSUNDEEP
htmlcsshtml-listsvertical-alignment
Haradzieniec
Haradzieniec

Reputation: 9340

ul li text vertical alignment a bit lower than vertical center

I'm having some troubles to put the text within ul li a bit lower than vertically aligned by center. My code is at jsFiddle

I want it to be the same, look the same way in most of browsers, but text to be 10 px lower than it is.

Thank you.

<style>
#super-ul
    {
        list-style-type : none;
        padding-top     : 0;
        overflow        : hidden;
        float           : left;
    }

#super-ul li
    {
        display       : inline-block;
        border:1px solid red;
    }

#super-ul li img
    {
        vertical-align : middle;
    }

</style>

<ul id="super-ul">
<li><a href="#"><img src="http://www.google.by/images/icons/product/chrome-48.png" alt=""></a></li>
<li><div><a href="#">This text should be valigned center but 10px down</a></div></li>
</ul>

Upvotes: 2

Views: 2861

Answers (3)

zessx
zessx

Reputation: 68790

Not exactly the solution you're searching for, but you can use <sub> tag, with a font resize .

The problem is that you can't specify the margin which will be applied.

(You can also double the <sub> tag to increase this margin, but it starts to be very ugly)

Upvotes: 1

Manish Sharma
Manish Sharma

Reputation: 1720

try this one

super-ul li.test{ position:relative; top:10px;}

simply apply this li on particular li

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

I have used the nth-child CSS Selectors for your requirement

see the updated CSS 

#super-ul
    {
        list-style-type : none;
        padding-top     : 0;
        overflow        : hidden;
        float           : left;
    }
    #super-ul li
    {
        display       : inline-block;
        border:1px solid red;

    }
        #super-ul li:nth-child(2n)
    {
        display       : inline-block;
        border:1px solid green;
        top:10px;
        position:relative;    
    }
    #super-ul li img
    {
        vertical-align : middle;
    }

see the demo :-

http://jsfiddle.net/8Ncmq/36/

I hope you are looking like this......

Upvotes: 0

Related Questions