2012-11-23 22 views
5

मेरे पास एक div है, जिसमें एक छवि और एक अवधि है। मैं इस अवधि में टेक्स्ट को छवि के साथ मध्य-गठबंधन करना चाहता हूं। स्वाभाविक रूप से, मैंने आपकी सुविधा के लिए fiddle बनाया है।सीएसएस लंबवत पाठ संरेखण

  • span {vertical-align:middle;} कुछ भी नहीं लगता है:

    <div id="legend"> 
        <img src="http://fate.holmes-cj.com/plus.png"/> 
        <span> * 5</span> 
    </div> 
    

    यहाँ बातें मैं कोशिश की है में से कुछ हैं:

    यहाँ एचटीएमएल है।

  • span {vertical-align:top;} टेक्स्ट को छवि के शीर्ष पर संरेखित करता है। आपको लगता है कि अगर top काम करता है, तो middle होगा।
  • span {vertical-align:20px;} मुझे वह देता है जो मुझे चाहिए, लेकिन यह div ऊंचाई, छवि ऊंचाई और फ़ॉन्ट आकार पर निर्भर करता है (और इसके साथ बातचीत करता है)।
  • display:table-cell को एसओ पर कहीं और सुझाव दिया गया है, लेकिन ऐसा लगता है कि क्रोम में कुछ भी नहीं है।

तुम मेरे Fate Dice Roller पर संदर्भ में समस्या देख सकते हैं। कुछ बार "रोल" पर क्लिक करें, और उसके बाद हिस्टोग्राम पर माउस। आपको अपने पासा रोल पर कुछ साफ आंकड़े मिलते हैं, लेकिन टेक्स्ट हिस्से को गलत तरीके से गलत किया जाता है।

क्या मैं यहां भाग्य से बाहर हूं, या वर्टिकल संरेखण वास्तव में यह गन्दा होना चाहिए? मुझे एक ऐसे समाधान से प्यार होगा जो फ़ॉन्ट आकार बदलने पर tweaked नहीं है।

+0

सीएसएस की खुशी में आपका स्वागत है। – Rolf

उत्तर

9

ये रहा: http://jsfiddle.net/nYbwf/3/

बस vertical-align: middle छवि तत्व पर, कि जिस तरह से यह खड़ी सही आधारभूत के बजाय बीच में संयोजित करेगा।

+0

यह मेरे लिए गलत लगता है, लेकिन यह काम करता है। तो मैं इसका उपयोग कर रहा हूँ। – slashingweapon

+2

हां, लंबवत-संरेखण: मध्य थोड़ा अजीब है, यह वास्तव में पाठ के साथ संरेखित है। देखें http://www.impressivewebs.com/css-vertical-align/ "मूल्य के बारे में" मध्य "" – allaire

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