खड़ा अलाइनमेंट

Question

वहाँ तत्वों या बूटस्ट्रैप में ग्रंथों के ऊर्ध्वाधर संरेखण के लिए चारों ओर किसी भी काम spans के अन्य फैला

उदाहरण के लिए के सापेक्ष है। अगर मैं एक पंक्ति है और इस

<div class="row-fluid"> 
    <div class="span3" style="background-color:lightblue">Description</div> 
    <div class="span9" style="background-color:pink"> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .... 
    </div> 
</div> 

की तरह फैला है यह इस

तरह लग रहा है तो वहाँ दिखाने के लिए अगले अवधि की ऊंचाई के "विवरण" खड़ी केंद्र एक तरीका है?

Answer 1

आप करने की कोशिश कर रहे हैं, तो खड़ी निश्चित स्क्रीन आकार जैसे आप हमेशा मीडिया के प्रश्नों का उपयोग कर सकते के लिए एक तत्व केंद्र:

/*tablet*/ 
@media (min-width: 768px) and (max-width: 979px) { 
    #logo{ 
    margin-top:70px; 
    } 
} 
/*desktop*/ 
@media (max-width: 979px) { 
    #logo{ 
    margin-top:20px; 
    } 
} 
/*large desktop*/ 
@media (min-width: 1200px) { 
    #logo{ 
    margin-top:0; 
    } 
} 

Answer 2

$('.row').each(function() { 
    var rowHeight = $(this).height(); 
    $(this).find("[class^='span']").each(function() { 
    if ($(this).height() < rowHeight-20) { 
     var odstep = (rowHeight - $(this).height())/2 ; 
     $(this).css("padding-top", odstep); 
    } 
    }); 
}); 

Answer 3

आप कुछ absolute centering tricks with CSS बाहर की कोशिश कर सकते। उदाहरण के लिए, यदि आप इच्छुक हैं: 1) div की ऊंचाई को केंद्रित करने की घोषणा करें, और 2) अपना .row-fluidposition: relative; बनाएं तो शायद this sample could work for you।

निम्नलिखित डोम में परिणामी:

<div class="row-fluid relative"> 
    <div class="span3"> 
     <div class="vercenter" style="background-color:lightblue">Description</div> 
    </div> 
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div> 
</div> 

और सीएसएस:

.relative { 
    position: relative; 
} 
.vercenter { 
    height: 1.5em; 
    margin: auto; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
} 

Answer 4

मैं इस पर बहुत कुछ काम किया, और jquery का उपयोग करके एक सरल उपाय यहाँ दिखाया गया है!

<script> 
$(document).ready(function(){ 
    var relheight=$('.span9').height()/2; 
    $('.span3').css('margin-top', relheight) ; 

}); 
</script> 

यह काम करता है और मैं भी यह परीक्षण किया गया। अगर आपको मेरा जवाब पसंद है तो कृपया मुझे

Answer 5

बूटस्ट्रैप में इस तरह के मुद्दे के लिए कोई प्रावधान नहीं है। यह प्रत्यारोपण निर्भर है। हालांकि आप एक सीएसएस नियम लिख सकते हैं कि अगर अगला div पिछले div की ऊंचाई से अधिक है, तो पिछले div & की केंद्र ऊंचाई पर पिछले div को संरेखित करें, जहां भी आप इस तरह के व्यवहार चाहते हैं, इस वर्ग को divs पर लागू करें।

Answer 6

इस स्क्रिप्ट-मुक्त समाधान को देखें।

<div class="row-fluid"> 
    <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div> 
    <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;"> 
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .... 
    </div> 
</div> 

कार्रवाई में कोड: jsFiddle

बस इनलाइन स्टाइल को हटा दें और अपने सीएसएस फ़ाइल में रखें। माता-पिता के लिए

Answer 7

कोशिश display: table; और बच्चे के लिए display: table-cell;

JSFiddle