Advertisement
  1. Web Design
  2. CSS
Webdesign

CSS తో Center చేయడం అనే అమూల్యమైన ఆర్టికల్

by
Difficulty:BeginnerLength:ShortLanguages:

Telugu (తెలుగు) translation by Yaswanth Gupta Bondada (you can also view the original English article)

క్రిస్ కోయెర్ ఈమధ్యనే 'CSS ఉపయోగించి చాలా రకాలుగా elements ని నిలువుగా లేదా అడ్డంగా center చేయడం' అనే అంశాన్ని విపులీకరించడానికి తన వెబ్సైట్ అయిన CSS Tricks లో డెసిష ట్రీ ని ప్రచురించారు. అవి స్వతంత్ర పరిష్కారాలు (standalone solutions) కాబట్టి వాటికి నిబంధనలు ఉంటాయి, కాని అవి కలిస్తే ఏ బ్రౌజర్ లోనైనా నిలకడ గా పనిచేసే తిరుగులేని సాధనం అవుతుంది (IE 8 and above).

ఈ విధంగా మీరు చేయాల్సి ఉంటుంది.

Blocks ని మొదలుపెట్టడం.

మీరు ఒక ప్రతిస్పందించే వెబ్సైట్ చేస్తున్నట్లు అయితే, మీరు చాలా మటుకు percentage తో మీ elements ని సైజ్ చేస్తారు, కాబట్టి ఒక అనిస్చిత.container element ని తయారు చేద్దాం:

మన container element సుమారుగా బయటకి సాగి ఉంది అని నిర్ధారించడానికి, ఇలా చేద్దాం. html, body { width: 100%; height: 100%; }.

Tables లా మార్చడం

ఇప్పుడు ఆ.container లోపల, ఒక సాధారణ table నమూనా ని ఉపయోగించి నిలువుగా center చేయబోతున్నాం. ఇది ఒక సాధారణ block level elements ని తీసుకుని వాటిని table cells గా వ్యవహరిస్తుంది, ఫలితంగా మనకు నిలువుగా center అవుతుంది:

చివరిగా, మనం అడ్డంగా center చేయబడిన element ని జత చేయబోతున్నాం:

దాని లోపల, డైనమిక్ గా ఎత్తైన text blocks లేదా absolute గా position అయిన elements ఏ కాకుండా,మన మనస్సుకు నచ్చింది ఏదైనా పెట్టవచ్చు.

మార్పుచేర్పులు

అడ్డంగా center చేయడాన్ని మార్చాలంటే, కేవలం.inner యొక్క text-align property ని మారిస్తే సరిపోతుంది. నిలువుగా center చేయడాన్ని మార్చాలంటేం .inner యొక్క vertical-align property ని మారిస్తే చాలు.

ముగింపు

ఈ ఉదాహరణ మీకు ఎక్కువగా అనిపించొచ్చు, కాని దీనిలో వాడింది కేవలం మూడు divలు: .outer, .inner, మరియు.centered. ఇంకా మనం వాడిన styling కూడా ఒకేలా ఉంది, కాబట్టి దీనిని మీరు మీ ప్రాజెక్ట్స్ లో boilerplate CSS గా కూడా వాడచ్చు ఇంక మీరు ఎప్పుడూ చింతించాల్సిన పని లేదు.

చాలా centering పధతులు తో పోలిస్తే ఇది కేవలం ఒక్క element మాత్రమే ఎక్కువ మరియు ఇది పూర్తిగా బులెట్ ప్రూఫ్. center చేయడం లో ఇదొక ప్రామాణిక విధం అవుంతుందని ఆశిస్తున్నాము, చిట్ట చివరిగా మనం css లో center చేయడం గురించి బాధ పడాల్సిన అవసరం లేదు.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.