ट्विटर बूटस्ट्रैप 3 - एक पंक्ति में लंबवत संरेखण कॉलम [मध्य]

Question

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

यदि मेरे पास heading टैग में टेक्स्ट है, तो इसमें डिफ़ॉल्ट मार्जिन है जो नीचे दिए गए पाठ को धक्का देता है। तो छवि शीर्ष पर बंधी जाएगी और पाठ शीर्ष से नीचे होगा।

यदि मुझे कॉलम को सामान्यीकृत करने और इसे बीच में गठबंधन करने की आवश्यकता है तो क्या होगा?

मेरे सवालों का है:

• वहाँ एक देशी बूटस्ट्रैप रास्ता कॉलम संरेखित करने के लिए है?
• यदि यह इस तरह के संरेखण का समर्थन नहीं करता है, तो मैं किस "हैक" का उपयोग कर सकता हूं? मैंने कुछ "हैक्स" का प्रयास किया लेकिन वे बेस बूटस्ट्रैप कार्यक्षमता को प्रभावित करते हैं।

वास्तव में क्या मैं क्या करने की जरूरत:

क्षमा करें, लेकिन यह एक jsfiddle में इसे बनाने के लिए मुश्किल है, यह कोणीय निर्देशों और टेम्पलेट शामिल है। बस उदाहरण के लिए:

मैं heading खड़ी शुरू में कम से कम होने के लिए बीच में संरेखित करने की जरूरत है, या:

मैं एक निर्देश जो इस उत्पन्न करता है। उदाहरण के लिए:

यदि आप प्रयोग करना चाहते हैं तो मैंने यह jsfiddle बनाया है। मैं बिना किसी कोड के स्पष्टीकरण स्वीकार करता हूं।

मैं इसे कुछ "हैक" सीएसएस के साथ ठीक कर सकता हूं, लेकिन मैं जानना चाहता हूं कि मैं इसे सही तरीके से कैसे कर सकता हूं।

Answer 1

एक दृष्टिकोण img तत्व इस तरह पर translateY उपयोग करने के लिए है:

.v-center { 
    position: relative; 
    transform: translateY(50%); 
} 

तुम भी एक col-*-2 अंदर छवि डाल करने के लिए चाहता हूँ ..

डेमो:http://bootply.com/tVyuhaFoww

Answer 2

पहले पैराग्राफ के शीर्ष पर छवि को संरेखित करने का एक और तरीका है अपनी डिज़ाइन को दो पंक्तियों में विभाजित करना। पहली पंक्ति में हेडर होता है और दूसरी पंक्ति में छवि, पैराग्राफ और लिंक होते हैं। यह उपरोक्त आपकी दूसरी छवि जैसा दिखता है, अगर आप इसे देखना चाहते हैं।

http://jsfiddle.net/404vska2/

<div class="row"> 
    <div class="col-xs-10 col-xs-push-2"> 
    <h4 class="ng-binding">Monaco make Bernardo Silva move permanent</h4> 
    </div> 
</div> 
<div class="row"> 
    <img src="http://s12.postimg.org/gt71dlbd5/1421893782_flat_world_cup_icon_512_Socker_1.png" alt="" class="col-xs-2"> 
    <div class="col-xs-10"> 
    <p class="ng-binding">Bernardo Silva's loan move from SL Benfica to AS Monaco FC has been made permanent, with the 20-year-old settling in well since his summer switch to France.</p> 
    <span class="rss-news-date ng-binding">Jan 21, 2015</span> 
    <p><a ng-href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent" href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent">Lean more</a> </p> 
    </div> 
</div>