ഒരു ഫിക്സ്ഡ് വിഡ്ത്ത് ലേഔട്ടിനൊപ്പം സെന്റർ ഒരു പ്രമാണത്തിലേക്ക് CSS ഉപയോഗിക്കുക

അവിടെയുള്ള ചില ബ്രൌസറുകളുമായി മിഴിവുള്ള ഫിക്സഡ് വിഡ്ത്ത് ലേഔട്ടുകൾക്ക് പ്രയാസമായിരിക്കും, പക്ഷേ ഏതാനും കോഡ് ലൈനുകൾ മാത്രമേ സാധ്യമാകൂ.

ഇവിടെ എങ്ങനെയാണ്

1. നിങ്ങളുടെ HTML എഡിറ്ററിൽ ഒരു CSS സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിച്ച് ഒരു പുതിയ വെബ് പേജ് സൃഷ്ടിക്കൂ.
2. പേജിലെ പ്രധാന ഘടകമായി ഒരു പേജിന്റെ മൂലരൂപം നിങ്ങൾ പേജിൽ സംഭരിച്ചുവെക്കും.
3. പേജിൽ തനതായ ഒരു ഡി ഐഡി നൽകുക.
4. നിങ്ങളുടെ CSS ശൈലി ഷീറ്റ് തുറന്ന് നിങ്ങളുടെ div ഘടകത്തിൻറെ വീതി ക്രമീകരിക്കുക. div # main {width: 750px; }
5. നിങ്ങളുടെ div കേന്ദ്രഭാഗത്തേക്ക് യാന്ത്രിക മാർജിനുകൾ ചേർക്കുക. div # main {width: 750px; മാർജിൻ-ഇടത്: ഓട്ടോ; മാർജിൻ വലത്: യാന്ത്രിക}
6. നെറ്റ്സ്കേപ്പ് 4, ഐഇ 4 - 6 ( ക്വിർക്കുകൾ മോഡ് ) എന്നിവയ്ക്കായി ഇത് തിരുത്താൻ, ശരീരത്തിൽ ടെക്സ്റ്റ് അലൈൻ ചേർക്കുക. body {text-align: center; }
7. എന്നാൽ അതിനകത്തുള്ള എല്ലാ ടെക്സ്റ്റും കേന്ദ്രീകരിച്ചു, അതിനാൽ നിങ്ങളുടെ # main div ൽ text-align: left ചേർക്കുക വഴി ടെക്സ്റ്റ് വീണ്ടും ചേർക്കുക. അവിടെ. div # main {width: 750px; മാർജിൻ-ഇടത്: ഓട്ടോ; മാർജിൻ വലത്: ഓട്ടോ; ടെക്സ്റ്റ് അലൈൻ: ഇടത്; }
8. നിങ്ങളുടെ പേജും നിങ്ങളുടെ ശൈലി ഷീറ്റും സംരക്ഷിക്കുക.
9. നിരവധി വെബ് ബ്രൌസറുകളിൽ പരിശോധന നടത്തുക.

നുറുങ്ങ്

ഇത് ലേഔട്ട് ബോക്സിനെ കേന്ദ്രീകരിക്കും, അതിലുള്ള ഉള്ളടക്കമൊന്നുമില്ല. ഉൾച്ചേർത്ത ഉള്ളടക്കം കേന്ദ്രമാക്കാൻ ടെക്സ്റ്റ് അലൈൻ ഉപയോഗിക്കുക.