डिस्प्ले टेबल-सेल के साथ वर्टिकल-एलाइन बीच छवियों पर काम नहीं कर रहा है

Question

मैं लंबवत-संरेखण का उपयोग करने की कोशिश कर रहा हूं: कभी-कभी पाठ, कभी-कभी छवियों को लंबवत केंद्र के लिए लेआउट पर बीच, लेकिन यह केवल टेक्स्ट पर काम कर रहा है। क्या कोई मुझे बता सकता है क्यों?

HTML:

<div> 
    <img src="http://jsfiddle.net/img/logo.png"/> 
</div> 

<div> 
    <span> text </span> 
</div> 

सीएसएस:

div{ 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 

    margin:10px; 
} 
img, span{ 
    display:table-cell; 
    vertical-align:middle; 
} 

http://jsfiddle.net/9uD8M/ मैं एक बेला बनाई रूप में अच्छी तरह

Answer 1

border: 1px solid black को अपने img, span टैग पर रखें, फिर ब्राउज़र देव में दोनों तत्वों का निरीक्षण करें। कंसोल। आप देखेंगे कि अवधि अपने माता-पिता की 100% ऊंचाई तक डिफ़ॉल्ट है, जबकि छवि की परिभाषित ऊंचाई (वास्तविक छवि की ऊंचाई) है।

तो तुम नहीं वास्तव में खड़ी उन तत्वों div के सापेक्ष संरेखित कर रहे हैं, तो आप सिर्फ खड़ी अंदर अवधि :)

को स्पान तत्व रिश्तेदार पाठ संरेखित कर रहे हैं क्या तुम सच में खड़ी के लिए तालिकाओं का उपयोग करना चाहते हैं -centering, यहाँ सही कोड है: http://jsfiddle.net/WXLsY/

(vertical-align और display:table-cell माता पिता पर जाएँ, और आप उन पर आवरण मेज की जरूरत है)

लेकिन वहाँ यह करने के लिए अन्य तरीके हैं (अतः इस के लिए कई उत्तर दिए गए हैं सवाल, बस खोज का प्रयोग करें सी)

Answer 2

यहाँ समस्या को ठीक करने का एक तरीका है:

HTML:

<div> 
    <span><img src="http://jsfiddle.net/img/logo.png" /></span> 
</div> 
<div> 
    <span> text </span> 
</div> 

को span में रखें, छवि एक प्रतिस्थापित तत्व है, इसमें बच्चों की सामग्री नहीं हो सकती है, इसलिए लंबवत-संरेखण काम नहीं करेगा।

सीएसएस:

div { 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 
    margin:10px; 
} 
span { 
    display:table-cell; 
    vertical-align:middle; 
} 

डेमो देखें में: http://jsfiddle.net/audetwebdesign/Fz6Nj/

ऐसा करने के कई तरीके हैं, आप भी display: table-cell माता पिता div तत्व पर लागू हो सकते हैं, लेकिन यह एक अलग दृष्टिकोण होगा।

Answer 3

आप जोड़कर -> लाइन-ऊंचाई: 200px जोड़कर कोशिश कर सकते हैं; अवधि शैली खंड में, मुझे लगता है कि यह काम कर सकता है;

Answer 4

तालिका कक्ष के अंदर एक छवि को लंबवत रूप से संरेखित करने के लिए आपको छवि को ब्लॉक का प्रदर्शन देना होगा।

display: block 
margin: 0 auto 

मार्जिन: 0 ऑटो छवि को केंद्र को संरेखित करना है। अगर आप छवि को गठबंधन छोड़ना चाहते हैं तो इसे शामिल न करें। आप छवि सही आप जोड़ सकते हैं गठबंधन चाहते हैं:

float: right 

धन्यवाद, जी