నేను div లోపల వచనాన్ని (అడ్డంగా మరియు నిలువుగా) ఎలా మధ్యలో ఉంచగలను

Nenu Div Lopala Vacananni Addanga Mariyu Niluvuga Ela Madhyalo Uncagalanu



వెబ్ పేజీలను రూపకల్పన చేస్తున్నప్పుడు, డెవలపర్‌లు చిత్రాలు, వచనం, పట్టికలు మరియు ఇతరులతో సహా వివిధ భాగాలను జోడించవచ్చు. ఇంకా, బహుళ CSS లక్షణాలను ఉపయోగించి ఒక divలో వచనాన్ని మధ్యకు సమలేఖనం చేయవచ్చు. వచనాన్ని క్షితిజ సమాంతరంగా కేంద్రీకరించడానికి అత్యంత ప్రజాదరణ పొందిన పద్ధతి “ని ఉపయోగించడం టెక్స్ట్-అలైన్ ' గుణం. అదనంగా, మీరు కూడా ఉపయోగించవచ్చు ' లైన్-ఎత్తు 'మరియు' నిలువు-సమలేఖనం ” వచనాన్ని నిలువుగా సమలేఖనం చేయడం కోసం గుణాలు.

ఈ పోస్ట్ టెక్స్ట్‌ను నిలువుగా మరియు అడ్డంగా ఒక div లోపల కేంద్రీకరించే పద్ధతిని తెలియజేస్తుంది.:







ఒక div లోపల వచనాన్ని అడ్డంగా ఎలా కేంద్రీకరించాలి?

ఒక div లోపల వచనాన్ని అడ్డంగా మధ్యలో ఉంచడానికి, ఇచ్చిన విధానాన్ని చూడండి.



దశ 1: ఒక div కంటైనర్‌ను తయారు చేయండి



ప్రారంభంలో, '' సహాయంతో ఒక div కంటైనర్‌ను సృష్టించండి

' మూలకం. ఆపై, ''ని చొప్పించండి id 'డివ్ ఓపెనింగ్ ట్యాగ్ లోపల లక్షణం. ఆ తర్వాత, div ట్యాగ్ మధ్య కొంత వచనాన్ని పొందుపరచండి:





< div id = 'సమలేఖనం-కంటెంట్' >
Linuxhint అత్యుత్తమ వెబ్‌సైట్‌లలో ఒకటి కోసం కంటెంట్ సృష్టి.
div >


అవుట్‌పుట్


దశ 2: వచనాన్ని మధ్యకు సమలేఖనం చేయడానికి div కంటైనర్‌ను యాక్సెస్ చేయండి



ఇప్పుడు, '' సహాయంతో div కంటైనర్‌ను యాక్సెస్ చేయండి id 'అట్రిబ్యూట్ పేరు సెలెక్టర్' # ” మరియు క్రింది CSS లక్షణాలను వర్తింపజేయండి:

#సమలేఖనం-కంటెంట్{
వెడల్పు: 80 % ;
అంచు: 0 దానంతట అదే;
పాడింగ్: 20px;
నేపథ్య: #c8edf3;
టెక్స్ట్-అలైన్: సెంటర్;
రంగు: rgb ( 49 , పదిహేను , 240 ) ;
}


ఇక్కడ:

    • ' వెడల్పు కంటైనర్ వెడల్పు పరిమాణాన్ని సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది.
    • ' మార్జిన్ ” కంటైనర్ వెలుపల ఖాళీ స్థలాన్ని నిర్దేశిస్తుంది.
    • ' పాడింగ్ ” మూలకం యొక్క సరిహద్దు లోపల ఖాళీని నిర్వచిస్తుంది.
    • ' నేపథ్య ” మూలకం వెనుక వైపు నేపథ్య రంగును సెట్ చేస్తుంది.
    • ' టెక్స్ట్-అలైన్ టెక్స్ట్ యొక్క అమరికను ఇలా సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది కేంద్రం ”.
    • ' రంగు ” సరిహద్దు లోపల టెక్స్ట్ కోసం రంగును నిర్దేశిస్తుంది.

మేము సృష్టించిన div లోపల సమలేఖనం చేయబడిన వచనాన్ని అడ్డంగా విజయవంతంగా కేంద్రీకరించినట్లు గమనించవచ్చు:

ఒక div లోపల వచనాన్ని నిలువుగా ఎలా కేంద్రీకరించాలి?

div కంటైనర్ లోపల వచనాన్ని నిలువుగా మధ్యలో ఉంచడానికి, అందించిన సూచనలను అనుసరించండి.

దశ 1: div కంటైనర్‌ను యాక్సెస్ చేయండి

అన్నింటిలో మొదటిది, సృష్టించబడిన div కంటైనర్‌ను యాక్సెస్ చేయండి.

దశ 2: మధ్య వచనానికి నిలువుగా CSS లక్షణాలను వర్తింపజేయండి

ఆపై, దిగువ జాబితా చేయబడిన CSS లక్షణాలను divలో నిలువుగా మధ్య వచనానికి వర్తింపజేయండి:

#సమలేఖనం-కంటెంట్{
ప్రదర్శన: టేబుల్-సెల్;
వెడల్పు: 300px;
ఎత్తు: 150px;
పాడింగ్: 10px;
రంగు: నీలం;
నేపథ్య రంగు: rgb ( 248 , 215 , 166 ) ;
అంచు: 3px గీతలు #f09d03;
నిలువు-సమలేఖనం: మధ్య;
}


పై కోడ్ స్నిప్పెట్ ప్రకారం:

    • ఏర్పరచు ' ప్రదర్శన ” ఇది మూలకం యొక్క ప్రదర్శన ప్రవర్తనను నిర్దేశిస్తుంది పట్టిక-కణం ”, అంటే ఇది div ఎలిమెంట్‌లోని టేబుల్ సెల్ లాగా పనిచేస్తుంది.
    • ' వెడల్పు ” ఆస్తి మూలకం వెడల్పు పరిమాణాన్ని నిర్దేశిస్తుంది.
    • ' ఎత్తు ” మూలకం యొక్క ఎత్తును సెట్ చేస్తుంది.
    • ' పాడింగ్ ” మూలకం లోపల ఖాళీ స్థలాన్ని నిర్వచిస్తుంది.
    • ' రంగు ” మూలకం లోపల టెక్స్ట్ యొక్క రంగును సెట్ చేయడానికి ఉపయోగించబడుతుంది.
    • ' నేపథ్య రంగు ” మూలకం వెనుకవైపు రంగును నిర్దేశిస్తుంది.
    • ' సరిహద్దు ” ఆస్తి ఒక మూలకంపై సరిహద్దును నిర్వచిస్తుంది.
    • ' నిలువు-సమలేఖనం 'లో నిర్వచించబడిన మూలకం యొక్క నిలువు అమరికను సెట్ చేయడానికి ఆస్తి ఉపయోగించబడుతుంది' మధ్య ”.

అవుట్‌పుట్


కంటైనర్ లోపల వచనాన్ని నిలువుగా మరియు అడ్డంగా రెండు విధాలుగా మధ్యలో ఉంచే పూర్తి విధానం గురించి మీరు తెలుసుకున్నారు.

ముగింపు

ఒక div లోపల వచనాన్ని నిలువుగా మరియు అడ్డంగా కేంద్రీకరించడానికి, ముందుగా,

మూలకం సహాయంతో ఒక div కంటైనర్‌ను సృష్టించండి మరియు సెలెక్టర్‌ని ఉపయోగించడం ద్వారా దాన్ని యాక్సెస్ చేయండి. ఆపై, CSS లక్షణాలను వర్తింపజేయండి, దీనిలో “ టెక్స్ట్-అలైన్ 'ఆస్తి క్షితిజ సమాంతర అమరిక కోసం ఉపయోగించబడుతుంది మరియు' నిలువు-సమలేఖనం ” నిలువు అమరికను సెట్ చేస్తుంది. ఈ పోస్ట్ ఒక div లోపల వచనాన్ని నిలువుగా మరియు అడ్డంగా కేంద్రీకరించే పద్ధతులను ప్రదర్శించింది.