संरेखित सूची-शैली-छवि आनुपातिक पाठ के साथ

Question

तो मैं

<ul> 
    <li>Hello</li> 
</ul> 

और

li { 
    list-style-image: url(../img/bullet.png); /* 13x13 px */ 
    /* line-height: 13px; */ 
    /* vertical-align: middle; */ 
    padding-left: 5px; 
} 

जो दिखता है

आप पाठ और छवि तत्व देख सकते हैं के रूप में की तरह <li> लंबवत रूप से संरेखित नहीं हैं (छवि टेक्स्ट से अधिक है), मैंने लाइन-ऊंचाई और वर्टिकल-एलाइन को लागू करने की कोशिश की (कोड को टिप्पणी की), लेकिन यह भी बाहर नहीं था। क्या अच्छा संरेखण प्राप्त करने का कोई तरीका है?

Answer 1

पैडिंग आपके मामले में केवल तत्व के अंदर जो कुछ भी है, पाठ को प्रभावित करेगा।

केवल स्थिति समायोजन संपत्ति उपलब्ध list-style-position है, लेकिन केवल अनुमति दी मूल्यों inherit, inside या outside हैं। सबसे आम अभ्यास का उपयोग है:

list-style: none; 

और फिर <li> की पृष्ठभूमि

li { 
    /** the image will be vertically aligned in the center **/ 
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/ 
    padding-left: 20px; 
} 

Answer 2

आप केवल सूची आइटम प्रति एक रेखा है जब आप li तत्व

Answer 3

करने के लिए कुछ padding-bottom जोड़ सकते हैं सकता है एक img टैग या एक पृष्ठभूमि परिभाषित: के बजाय ली-टैग के लिए यूआरएल (..) " सूची-शैली-छवि "

Answer 4

मैं भी पृष्ठभूमि संपत्ति के लिए "न दोहराने" जोड़ने के लिए जरूरत के रूप में वांछित चित्र लागू

Answer 5

आप

<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>