छवियों के साथ क्षैतिज रूप से उल सूची में वस्तुओं को लंबवत रूप से संरेखित कैसे करें?

Question

मैं निम्न HTML कोड है:

<div id="footer"> 
    <ul id="yw1"> 
     <li><a href="/index.php/site/login">About</a></li> 
     <li><a href="/index.php/site/login">FAQ</a></li> 
     <li><a href="http://twitter.com"><img src="/images/twitter_icon.png" /></a></li> 
     <li><a href="http://twitter.com"><img src="/images/facebook_icon.png" /></a></li> 
    </ul>  
</div> 

और निम्नलिखित सीएसएस शैलियों:

#footer { 
    margin-top: 25px; 
    background: #000000 url(images/background.png) repeat; 
    padding: 25px; 
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .2); 
} 
#footer ul { 
    margin: 0; 
    padding: 0px 0px 0px 0px; 
    list-style: none; 
    line-height: normal; 
} 
#footer li { 
    padding-left: 20px; 
    display: inline; 
    list-style-type: none; 
} 
#footer a { 
    color:white; 
    letter-spacing: 1px; 
    text-decoration: none; 
    text-align: center; 
    font-size: 14px; 
    font-weight: 300; 
} 

अब परिणाम है:

लेकिन मैं चित्र और पाठ संरेखित करने की आवश्यकता लंबवत से लिंक। मैं यह कैसे कर सकता हूं? टैग डिफ़ॉल्ट रूप से इनलाइन है

Answer 1

img रूप में, यह खड़ी आधारभूत करने के लिए संरेखित करता है और इसलिए आप अपने img टैग

Demo

सीएसएस के लिए vertical-align: middle; उपयोग करने के लिए

#footer img { 
    vertical-align: middle; 
} 

Answer 2

बस अपने सीएसएस बदलने की जरूरत है

से

line-height:normal 

line-height:30px 

Answer 3

को तुम बस #footer li और #footer a + display: inline-block पर vertical-align: middle जरूरत छवियों पर:

#footer li { 
    /* ... */ 
    display: inline; 
    vertical-align: middle; 
} 
#footer a { 
    /* ... */ 
    vertical-align: middle; 
    display: inline-block; 
} 

http://jsfiddle.net/dfsq/7kssu/

Answer 4

सीएसएस निम्नलिखित उपयोगकर्ता।

li { display:inline-block; vertical-align:middle }