सीएसएस उपयुक्त सामग्री के लिए उपयुक्त तरीका

मैं सीएसएस आधारित डिज़ाइन के साथ काम करना पसंद करता हूं, लेकिन बैक एंड कोडर के रूप में मेरे सीएसएस कौशल थोड़ा कमजोर हैं। जब मैं लेआउट के साथ शामिल होता हूं, तो मैं टेबल आधारित स्वरूपण पर वापस आ जाता हूं क्योंकि मेरे दिमाग को टेबल आधारित दुर्व्यवहार के वर्षों से लड़ा गया है। एक विशेष समस्या है जिसे मैं हमेशा यात्रा करता हूं।सीएसएस उपयुक्त सामग्री के लिए उपयुक्त तरीका

<table width="100%"> 
    <tr> 
     <td align="center"> 
      content goes here 
     </td> 
    </tr> 
</table>

मैं कभी कभी का उपयोग करें:: क्या करने के लिए सबसे अच्छा विकल्प है सीएसएस

<div style="width:100%; text-align:center">content</div>

लेकिन यह बहुत सही प्रतीत नहीं होता। मैं पाठ संरेखित करने की कोशिश नहीं कर रहा हूं, मैं सामग्री संरेखित करने की कोशिश कर रहा हूं। इसके अलावा, ऐसा लगता है कि संलग्न तत्वों के पाठ संरेखण पर असर पड़ता है, जिसके लिए ठीक करने के लिए tweaking की आवश्यकता होती है। एक चीज जो मुझे नहीं मिलती है: वहां एक फ्लोट क्यों नहीं है: केंद्र शैली? ऐसा लगता है कि यह सबसे अच्छा समाधान होगा। उम्मीद है कि, मुझे कुछ याद आ रहा है और ऐसा करने के लिए एक आदर्श सीएसएस तरीका है।

स्रोत

2009-04-06 Paul Keister

आप सही हैं कि text-align टेक्स्ट को संरेखित करने के लिए है। यह वास्तव में केवल इंटरनेट एक्सप्लोरर है जो आपको इसके अलावा पाठ के अलावा कुछ भी केंद्र देता है। कोई अन्य ब्राउज़र इसे सही तरीके से संभालता है और ब्लॉक तत्वों को text-align से प्रभावित नहीं होने देता है।

सीएसएस का उपयोग करके ब्लॉक तत्वों को केंद्रित करने के लिए आप margin: 0 auto; का उपयोग करते हैं जैसे कि जो फिलिप्स ने सुझाव दिया था। हालांकि आपको टेबल को बिल्कुल रखने की आवश्यकता नहीं है।

कारण float: center; कोई कारण नहीं है कि फ़्लोटिंग तत्वों (आमतौर पर छवियों) को बाएं या दाएं स्थान पर रखने और उनके चारों ओर पाठ प्रवाह रखने का इरादा है। केंद्र में कुछ फ़्लोटिंग इस संदर्भ में समझ में नहीं आता है क्योंकि इसका मतलब यह होगा कि टेक्स्ट को तत्व के दोनों किनारों पर प्रवाह करना होगा।

स्रोत

2009-04-06 19:07:08 Guffa

टेबल के साथ अच्छा पकड़ो। मैंने उस पर काफी बारीकी से नहीं देखा। –

हाय उत्तर धन्यवाद, यह मदद करता है। लेकिन कैसे 'मार्जिन: 0 ऑटो;' जादू करता है, मुझे समझ में नहीं आता कि शून्य और ऑटो वैल्यू टेबल पर क्यों केंद्रित होगा? – GMsoF

@ जीएमएसएफ: शून्य लंबवत मार्जिन है और ऑटो क्षैतिज मार्जिन है। 'मार्जिन: 0 ऑटो;' मार्जिन का संक्षिप्त रूप है: 0 ऑटो 0 ऑटो; ', जो मार्जिन-टॉप का संक्षिप्त रूप है: 0; मार्जिन-दाएं: ऑटो; मार्जिन-तल: 0; मार्जिन-बाएं: ऑटो; '। – Guffa

मैं डालने की सिफारिश करेंगे एक अपने <td> में <div> और शैली विशेषता सेटिंग style="width: 200px; margin: 0 auto;"

को पकड़ आप एक निश्चित चौड़ाई सेट करना होगा कि है।

संपादित करें: फिर से प्रश्न को देखने के बाद, मैं तालिका को पूरी तरह से स्क्रैप करने की अनुशंसा करता हूं। जैसा कि मैंने सुझाव दिया है और किसी तालिका की आवश्यकता नहीं है, बस <div style="width: 200px; margin: 0 auto;> का उपयोग करें।

स्रोत

2009-04-06 18:43:22

हाय धन्यवाद जवाब है, यह मदद करता है। लेकिन कैसे मार्जिन: 0 ऑटो; जादू करता है, मुझे समझ में नहीं आता कि शून्य और ऑटो मान तालिका को क्यों केंद्रित करेगा? – GMsoF

d03boy का उत्तर केंद्र चीजों के सही तरीके से सही है।

अपनी अन्य टिप्पणी का उत्तर देने के लिए, "इसके अलावा, यह संलग्न तत्वों के पाठ संरेखण पर असर पड़ता है, जिसके लिए ठीक करने के लिए tweaking की आवश्यकता होती है।" सीएसएस कैसे काम करता है, यह प्रकृति है कि तत्व पर एक संपत्ति स्थापित करने से उसके सभी बच्चों को प्रभावित होता है, जब तक कि संपत्ति उनमें से किसी एक द्वारा ओवरराइड नहीं हो जाती है (मान लीजिए कि यह संपत्ति inherited है)।

स्रोत

2009-04-06 18:50:33

आप इसे आमतौर पर कहां पाते हैं? मेरे लिए - मैं सबसे अधिक बार साइट के पूरे डिजाइन केंद्र के लिए कोशिश कर रहा हूँ, तो मैं आमतौर पर ऐसा करते हैं: जबकि अभी भी अपने सभी पाठ छोड़ रहा है,

<html> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    </body> 
</html> 


body {text-align:center;} 
#wrapper {margin:0 auto; text-align:left; width:980px;}

यह 980px चौड़ाई के अनुसार पृष्ठ पर पूरे डिजाइन केंद्रित कर देगा बाएं गठबंधन (जब तक कि पाठ #wrapper तत्व के भीतर है)।

स्रोत

2009-04-06 18:58:17

यहां सीएसएस का उपयोग करके केंद्रित करने के लिए एक अच्छा संसाधन है।
http://www.w3.org/Style/Examples/007/center
यह दर्शाता है कि टेक्स्ट, ब्लॉक, छवियों और उन्हें लंबवत रूप से कैसे केन्द्रित किया जाए।

स्रोत

2009-04-06 19:11:32

उपयोग display:inline-block एक निश्चित चौड़ाई के बिना text-align:center और केंद्र सामग्री को सक्षम करने:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Centering</title> 

    <style type="text/css"> 
    .container { text-align:center; } 

    /* Percentage width */ 
    .wrapper { width: 99%; } 

    /* Use inline-block for wrapper */ 
    .wrapper { display: inline-block; } 

    /* Use inline for content */ 
    .content { display:inline; } 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div>abc</div> 
      <div>xyz</div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

स्रोत

2012-10-20 22:04:34

यह एक अच्छी चाल है! –

सीएसएस उपयुक्त सामग्री के लिए उपयुक्त तरीका

उत्तर

संबंधित मुद्दे