2012-08-22 46 views
26

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

यहाँ मेरी कोड है:

<div class="row"> 
    <div class="twelve columns"><br /> 
     <img src="img_06.jpeg" alt="slide image"> 
    </div> 
</div> 

वर्तमान परिदृश्य छवियों 12 स्तंभ ग्रिड पर ठीक हो, लेकिन जब एक चित्र छवि यह साथ आता है ग्रिड के बाईं ओर स्थित है। अगर मैं इसे 25% पैडिंग देता हूं तो यह केंद्र में जाता है, लेकिन मैं सभी छवियों को फ़ोल्डर से खींचने और फ्लाई पर कोड जेनरेट करने के लिए php का उपयोग कर रहा हूं, इसलिए मेरे पास सभी छवियों पर 25% पैडिंग नहीं हो सकती है (परिदृश्य वाले लोग हटते हैं)।

धन्यवाद

उत्तर

80

संपादित नवंबर 2015: फाउंडेशन 6 की जांच में बाहर Typography Helpers


संपादित करें अप्रैल 2014: फाउंडेशन 5 जांच Utility classes में।


मूल जवाब:

पाठ केंद्र वर्ग का प्रयोग करें।

<div class="row"> 
    <div class="twelve columns text-center"><br /> 
     <img src="img_06.jpeg" alt="slide image"> 
    </div> 
</div> 

स्रोत: https://github.com/zurb/foundation/pull/224

+0

यह उत्तर सबसे अच्छा है क्योंकि यह मौजूदा सीएसएस शैली का उपयोग करता है। एक नई कक्षा बनाना सिर्फ ब्लोट, जीता, मेह और फिलर जोड़ता है। सवाल तब मेरे दिमाग में तैरता है जहां दस्तावेज इस 'टेक्स्ट-सेंटर' वर्ग के बारे में है। शायद मैं इसे याद किया? –

+1

+1 यह सबसे अच्छा जवाब है क्योंकि ओपी ने नींव के बारे में पूछा और यह समाधान एक अंतर्निहित नींव वर्ग का उपयोग करता है। – Brandon

+0

मुझे यकीन नहीं है कि यह पहले उपलब्ध था या नहीं। वैसे भी, मैंने इसे सही उत्तर के रूप में स्वीकार कर लिया है। – Ando

4

केंद्रित वर्ग जोड़ने का प्रयास करें।

.five.columns.centered 
+0

मुझे कक्षा परिभाषा नहीं दिखाई दे रही है। क्या मुझे कुछ याद आती है? –

+3

यह काम नहीं करता है! यह ग्रिड तत्व केंद्रित करता है और सामग्री स्वयं नहीं - यहां पढ़ें http://foundation.zurb.com/docs/grid.php – renathy

2

नींव 4 का उपयोग करना:

HTML:

<div class="row"> 
    <div id="wrap-img" class="large-12 columns"><br /> 
     <img src="img_06.jpeg" alt="slide image"> 
    </div> 
</div> 

सीएसएस:

#wrap-img img { margin: 0 auto; } 
1

एक ही रास्ता मैं एक छवि में केंद्रित कर सकते हैं मिला टियन 4 को प्रदर्शित करने के लिए बदलना है: ब्लॉक; प्रदर्शन के बजाय img के लिए: इनलाइन-ब्लॉक;

3

बस "टेक्स्ट-सेंटर" श्रेणी जोड़ें