ఒక వచనాన్ని ఎక్కడైనా సులభంగా జోడించవచ్చు, కానీ సమలేఖనం లేకుండా, అది ప్రదర్శించలేనిదిగా మరియు తక్కువ ఆకర్షణీయంగా కనిపించవచ్చు. సమలేఖనం చేయని వచనం వెబ్ పేజీ యొక్క మొత్తం రూపానికి కూడా భంగం కలిగించవచ్చు. వెబ్ అప్లికేషన్‌లలో ఇటువంటి విషయాలను పరిష్కరించడానికి, మేము CSS యొక్క కొన్ని ఉపయోగకరమైన లక్షణాలను ఉపయోగించవచ్చు, ఇది మీకు ఏ సమయంలోనైనా టెక్స్ట్‌లను సమలేఖనం చేయడంలో సహాయపడుతుంది.
CSSలో వచనాన్ని నిలువుగా ఎలా సమలేఖనం చేయాలో ఈ కథనం ప్రదర్శిస్తుంది.
CSSలో వచనాన్ని నిలువుగా సమలేఖనం చేయడం ఎలా?
CSSలో, మీరు వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి క్రింది లక్షణాలను ఉపయోగించవచ్చు:
-
- లైన్-ఎత్తు ఆస్తి
- వస్తువుల లక్షణాలను ప్రదర్శించండి మరియు సమలేఖనం చేయండి
ఇప్పుడు, ఒక్కో పద్ధతిని ఒక్కొక్కటిగా చూద్దాం!
విధానం 1: CSSలో వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి లైన్-ఎత్తు ప్రాపర్టీని ఉపయోగించడం
ది ' లైన్-ఎత్తు ” ప్రాపర్టీ దిగువన మరియు పైకి ఇన్‌లైన్ మూలకాలను నిర్దేశిస్తుంది. ఇది ఇతర అంశాల నుండి టెక్స్ట్ యొక్క దూరాన్ని సెట్ చేస్తుంది. పంక్తి-ఎత్తు ప్రాపర్టీని ఉపయోగించి, వచనాన్ని నిలువుగా మధ్యకు సులభంగా సమలేఖనం చేయవచ్చు.
ఉదాహరణ
ప్రస్తుతం ఎగువ ఎడమ వైపున ఉన్న పెట్టె (సరిహద్దు) లోపల వచనం ఇక్కడ ఉంది. ఈ వచనాన్ని మధ్యలో నిలువుగా మరియు అడ్డంగా సమలేఖనం చేద్దాం:
ఇప్పుడు తదుపరి పద్ధతికి వెళ్దాం. ' ఫ్లెక్స్‌బాక్స్ ” అనేది HTMLని ఫార్మాట్ చేయడానికి మిమ్మల్ని అనుమతించే ఒక డైమెన్షనల్ లేఅవుట్. మీరు అంశాలను నిలువుగా లేదా అడ్డంగా సమలేఖనం చేయడానికి కూడా దీనిని ఉపయోగించవచ్చు. కాబట్టి, ఒక ఉదాహరణ తీసుకుని, ఫ్లెక్స్‌బాక్స్ సహాయంతో వచనాన్ని నిలువుగా సమలేఖనం చేద్దాం. ఉదాహరణ అన్నింటిలో మొదటిది, '' విలువను సెట్ చేయడం ద్వారా మేము మా కంటైనర్‌ను అనువైనదిగా చేస్తాము ప్రదర్శన 'ఆస్తి' ఫ్లెక్స్ ”. తరువాత, 'ని ఉపయోగించండి సమలేఖనం-అంశాలు ”కంటెంట్‌ను మధ్యలో నిలువుగా సెట్ చేయడానికి ప్రాపర్టీ. అంతేకాకుండా, మధ్యలో ఉన్న కంటెంట్‌ను అడ్డంగా సమలేఖనం చేయడానికి, “ జస్టిఫై-కంటెంట్ ”ఆస్తి ఉపయోగించబడుతుంది: CSSలో, '' సహాయంతో వచనాన్ని సులభంగా నిలువుగా సమలేఖనం చేయవచ్చు లైన్-ఎత్తు ”ఆస్తి. మీరు కూడా ఉపయోగించవచ్చు ' ఫ్లెక్స్ బాక్స్ 'తో వచనం యొక్క నిలువు అమరిక కోసం' ప్రదర్శన 'మరియు' సమలేఖనం-అంశాలు 'గుణాలు. ఫ్లెక్స్‌బాక్స్ అనేది ఒక డైమెన్షనల్ లేఅవుట్ మరియు ఐటెమ్‌ల నిలువు లేదా క్షితిజ సమాంతర అమరిక కోసం ఉపయోగించబడుతుంది. CSSలో వచనాన్ని నిలువుగా సమలేఖనం చేయడంలో మీకు సహాయపడే రెండు సులభమైన పద్ధతులను ఈ పోస్ట్ అందించింది.
అలా చేయడానికి, ఒక కంటైనర్‌ను జోడించండి'
ఉత్తమ విద్యా వెబ్‌సైట్ !
div >
పెట్టె 'ని ఉపయోగించి ఏర్పడుతుంది 3px 'సరిహద్దు మరియు' 250px 'ఎత్తు. ది ' ఫాంట్ పరిమాణం 'ఆస్తి విలువతో ఉపయోగించబడుతుంది' 24px ” ఫాంట్ కనిపించేలా చేయడానికి. మేము డివిని కేటాయిస్తాము ' లైన్-ఎత్తు 'యొక్క' 250px ” దాని వచనాన్ని మధ్యలో నిలువుగా సమలేఖనం చేయడం కోసం. తరువాత, మేము 'ని ఉపయోగిస్తాము టెక్స్ట్-అలైన్ ” వచనాన్ని మధ్యలో సమలేఖనం చేసే లక్షణం:
లైన్-ఎత్తు: 250px;
టెక్స్ట్-అలైన్: సెంటర్;
ఫాంట్ పరిమాణం: 24px;
ఎత్తు: 250px;
అంచు: 3px ఘన;
}
మీరు చూడగలిగినట్లుగా, టెక్స్ట్ లైన్-ఎత్తును ఉపయోగించి మధ్యలోకి నిలువుగా మరియు టెక్స్ట్-అలైన్ ప్రాపర్టీతో మధ్యకు అడ్డంగా సమలేఖనం చేయబడింది. విధానం 2: CSSలో వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి డిస్ప్లే మరియు సమలేఖన-అంశాల ప్రాపర్టీని ఉపయోగించడం
ప్రదర్శన: ఫ్లెక్స్ ;
సమలేఖనం-అంశాలు: కేంద్రం;
జస్టిఫై-కంటెంట్: సెంటర్;
ఫాంట్ పరిమాణం: 24px;
ఎత్తు: 200px;
అంచు: 3px ఘన;
}
పేర్కొన్న వచనం విజయవంతంగా మధ్యలోకి సమలేఖనం చేయబడింది:
మేము CSSలో వచనాన్ని నిలువుగా సమలేఖనం చేయడానికి సంబంధించిన పద్ధతులను అందించాము. ముగింపు