समस्या के लंबवत रूप से एक तत्व के पाठ को संरेखित करने में समस्या

Question

मैं सीएसएस का उपयोग कर अपने तत्व के बीच में कुछ पाठ संरेखित करना चाहता हूं।

<div id="testimonial"> 
    <span class="quote">Some random text that spans two lines</span> 
</div> 

और प्रासंगिक सीएसएस:

#testimonial { 
    background: url('images/testimonial.png') no-repeat; 
    width: 898px; 
    height: 138px; 
    margin: 0 auto; 
    margin-top: 10px; 
    text-align: center; 
    padding: 0px 30px 0px 30px; 
} 

.quote { 
    font-size: 32px; 
    font-family: "Times New Roman", Verdanna, Arial, sans-serif; 
    vertical-align: middle; 
    font-style: italic; 
    color: #676767; 
    text-shadow: 1px 1px #e7e7e7; 
} 

आमतौर पर #testimonial के ऊर्ध्वाधर बीच में .quote प्राप्त करने के लिए, मुझे क्या करना चाहते हैं:

.quote { line-height: 138px; } 

यह मेरा मार्कअप है

लेकिन यह लेआउट तोड़ता है क्योंकि .quote में पाठ एक से अधिक लाइन फैलता है।

जैसा कि आप देख सकते हैं कि मैंने vertical-align: middle; करने का प्रयास किया है और यह या तो काम नहीं करता है।

किसी भी मदद की सराहना की जाती है। चीयर्स।

Answer 1

इस साइट में:

http://www.emblematiq.com/blog/vertical_align_with_css/

परिणाम के साथ

:

:

http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html

display: table-cell, vertically-align: middle पद्धति का उपयोग करके खड़ी कई पंक्तियों केंद्र के लिए निम्न मार्कअप/सीएसएस का उपयोग करता है

<div id="wrapper"> 
    <img src="0.gif" alt="stuff" id="fixed" /> 
    <div id="floating"><div><div> 
<p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p> 
    </div></div></div> 
</div> 

p { 
    margin:0; 
    padding:0; 
} 
#wrapper { 
    width:550px; 
    border:1px solid #666; 
    padding:10px; 
    height:300px; 
} 
#fixed { 
    float:right; 
    width:200px; 
    height:300px; 
    background:#666; 
    display:block; 
} 
#wrapper>#floating { /*display:table for Mozilla & Opera*/ 
    display:table; 
    position:static; 
} 
#floating { /*for IE*/ 
    width:300px; 
    height:100%; 
    background:#EAEAEA; 
    position:relative; 
} 
#floating div { /*for IE*/ 
    position:absolute; 
    top:50%; 
} 
#floating>div { /*for Mozilla and Opera*/ 
    display:table-cell; 
    vertical-align:middle; 
    position:static; 
} 
#floating div div { 
    position:relative; 
    top:-50%; 
} 

Answer 2

इस वेबसाइट के options for vertical centering with css की अधिकता प्रदान करता है।

आप .quote पर एक ऊंचाई सेट कर सकते हैं, मुझे लगता है कि विधि 2 इस स्थिति में काम करेगा:

.quote { 
    position:absolute; 
    top:50%; 
    height:240px; 
    margin-top:-120px; /* negative half of the height */ 
} 

एक अन्य विकल्प सीएसएस में display:table-cell; vertical-align:middle; विधि का उपयोग करने के लिए है, लेकिन इस विकल्प IE में काम नहीं करता है , इसलिए आपको एक आईई-विशिष्ट संस्करण भी सेट करना होगा।

Answer 3

क्योंकि किसी ने अभी तक तालिका सेल समाधान के साथ इसका उत्तर नहीं दिया है ..

यहाँ

तुम जाओ - एक एक IE6/7 समाधान के साथ भी (हालांकि यह एक yukky एचटीएमएल हैक शामिल है) के रूप में @thirtydot टिप्पणी में कहते हैं, टेबल प्रदर्शन गुण IE7 और नीचे द्वारा समर्थित नहीं हैं -

अगर आप डॉन 'टी चाहते हैं/अतिरिक्त HTML तत्व की तरह, तुम बस IE7 देने के लिए और कर सकता है .quote पर कुछ शीर्ष गद्दी नीचे - तो, ​​जबकि यह खड़ी सही रूप में केंद्रित नहीं किया जाएगा यह एक स्वीकार्य गिरावट वापस

सीएसएस हो सकता है कि:

#testimonial { 
    background: #eee url('images/testimonial.png') no-repeat; 
    width: 898px; 
    height: 138px; 
    margin: 10px auto 0; 
    padding: 0 30px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.quote { 
    font-size: 32px; 
    font-family: "Times New Roman", Verdana, Arial, sans-serif; 
    font-style: italic; 
    color: #676767; 
    text-shadow: 1px 1px #e7e7e7; 
} 

आईई सीएसएस:

<!--[if lte IE 7]> 
<style type="text/css" media="screen"> 
#testimonial i { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

.quote { 
    display: inline-block; 
    width: 100%; 
    vertical-align: middle; 
} 
</style> 
<![endif]--> 

HTML:

<div id="testimonial"> 
    <i></i> 
    <span class="quote">Some random text <br> that spans two lines</span> 
</div> 

Answer 4

मैं recently found out है कि कुछ के ऊर्ध्वाधर केंद्रित जो आयाम अपरिभाषित है line-height: 0; के साथ संयोजन में vertical-align: middle; साथ बहुत अच्छी तरह से चला जाता है।

यह demonstration fiddle देखें।

HTML:

<div id="testimonial"> 
    <span><span class="quote">Some random text<br />that spans two lines</span></span> 
</div> 

सीएसएस:

#testimonial { 
    background: #333 url('images/testimonial.png') no-repeat; 
    width: 898px; 
    height: 138px; 
    margin: 0 auto; 
    margin-top: 10px; 
    text-align: center; 
    padding: 0 30px 0 30px; 
    line-height: 138px; 
} 
#testimonial>span { 
    display: inline-block; 
    line-height: 0; 
    vertical-align: middle; 
} 
.quote { 
    font-size: 32px; 
    font-family: "Times New Roman", Verdanna, Arial, sans-serif; 
    font-style: italic; 
    color: #676767; 
    text-shadow: 1px 1px #e7e7e7; 
    line-height: 32px; 
} 

Answer 5

आप इसे एक अवधि के साथ सरल कर सकते हैं http://jsfiddle.net/7ebLd/

#testimonial { 
    height: 138px; 
    line-height: 138px; 
} 
span { 
    display: inline-block; 
    line-height: 19px; 
    vertical-align: middle; 
} 

की