सीएसएस: लंबवत पाठ को टेक्स्ट में संरेखित करें,

काम नहीं करता है मैं ली आइटम के लिए एक सूची-शैली-छवि का उपयोग करता हूं, और एक सिंगल-लाइन टेक्स्ट।सीएसएस: लंबवत पाठ को टेक्स्ट में संरेखित करें,

enter image description here

लेकिन यह बुरा लग रहा है, तो मैं खड़ी छवि के मध्य में करने के लिए पाठ संरेखित करना चाहते हैं।

मुझे लंबवत-संरेखण का उपयोग करना चाहिए: मध्य, सही? लेकिन यह मेरे लिए काम नहीं किया।

<html> 
    <head> 
     <title> This is an demo </title> 
     <style> 
      body { 
       background-color: #464443; 
       color: white; 
      } 
      ul { 
       list-style-image: url('bg.png'); 
      } 

      li { 
       vertical-align: middle; 
      } 

     </style> 
    </head> 

    <body> 
     <ul> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
      <li>abc</li> 
     </ul> 
    </body> 
</html>

स्रोत

2012-04-09 daisy

यह करने के लिए (IMO) एक संतोषजनक तरीके का उपयोग नहीं करने के लिए सूची-शैली-छवि, बजाय पृष्ठभूमि संपत्ति का उपयोग कर "गोली" स्थापित करने के लिए है (ध्यान दें मैं अपने खुद के प्लेसहोल्डर छवि प्रतिस्थापित के बाद से मैं सिर्फ कॉपी किया/एक पहेली से चिपकाया)। आपके पैडिंग और अन्य आयाम "बुलेट" छवि के आकार के आधार पर अलग-अलग होंगे। ली को http://jsfiddle.net/huBpa/1/

body { 
    background-color: #464443; 
    color: white; 
} 

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

li { 
    background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat; 
    line-height: 32px; 
    vertical-align: middle; 
    padding-left: 40px; 
}

स्रोत

2012-04-09 04:08:50

सहमत हुए। 'पृष्ठभूमि' एक बहुत अधिक भरोसेमंद + सटीक विधि – benesch

टेक्स्ट काम नहीं करेगा यदि टेक्स्ट एकाधिक लाइनें हैं। – Muhd

आप सही हो सकते हैं, मुहम्मद, लेकिन केवल परिभाषा के आधार पर: यह कई पंक्तियों के साथ ठीक "काम करता है", लेकिन बुलेट हमेशा शीर्ष पर है। हालांकि, बुलेट सूचियों के लिए यह मानक बहुत अधिक है। जब तक कि मैं गलतफहमी नहीं कर रहा हूं, इस मामले में यदि आप समस्या को दिखाने के लिए मेरे बेवकूफ का कांटा करते हैं, तो मुझे इसे देखने में दिलचस्पी होगी! –

-1

जोड़ें line-height:

यहाँ बेला है। सुनिश्चित करें कि यह छवि

li { 
      vertical-align: middle; 
      line-height: 30px; 
     }

स्रोत

2012-04-09 04:11:13 Ray

नहीं: http://jsfiddle.net/huBpa/ –

यह रूप में एक ही ऊंचाई मैं क्या प्रयोग करेंगे जाता है। मैं ऊर्ध्वाधर संरेखण का उपयोग नहीं करता हूं और इसके बजाय टेक्स्ट को चारों ओर ले जाने के लिए पैडिंग का उपयोग करता हूं जहां भी मैं चाहता हूं।

ul { 
      list-style: none; 
      margin-left: 0; 
      padding-left: 0; 
    } 

    li { 
      padding: 10px 10px 15px 20px; 
      background-image: url(images/arrow.png); 
      background-repeat: no-repeat; 
      background-position: 0px; 
    }

स्रोत

2012-04-09 04:51:05 tastybento

सीएसएस: लंबवत पाठ को टेक्स्ट में संरेखित करें,

उत्तर

संबंधित मुद्दे