లింక్‌ను మధ్యలో ఉంచడానికి రెండు పద్ధతులు ఉన్నాయి:
- 'ని ఉపయోగించి CSSలో సెంటర్ లింక్‌లు టెక్స్ట్-అలైన్ ”ఆస్తి
- “ని ఉపయోగించి CSSలో సెంటర్ లింక్‌లు మార్జిన్ ”ఆస్తి
ఈ వ్యాసంలో, మేము లింక్‌ను మధ్యలో ఉంచడానికి రెండు పద్ధతులను వివరిస్తాము. కాబట్టి, ప్రారంభిద్దాం!
విధానం 1: టెక్స్ట్-అలైన్ ప్రాపర్టీని ఉపయోగించి CSSలో సెంటర్ లింక్‌లు
HTMLలో లింక్‌లను మధ్యలో ఉంచడానికి, మేము “ని ఉపయోగిస్తాము టెక్స్ట్-అలైన్ 'CSS యొక్క ఆస్తి. ది ' టెక్స్ట్-అలైన్ ” CSSలోని ఆస్తి ఎడమ, కుడి, మధ్య వంటి టెక్స్ట్ యొక్క అమరికను సర్దుబాటు చేయడానికి మరియు సమలేఖనాన్ని సమర్థించడానికి ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
టెక్స్ట్-అలైన్ ప్రాపర్టీ యొక్క సింటాక్స్:
టెక్స్ట్-అలైన్ : విలువ
స్థానంలో ' విలువ ”, మీరు ఎడమ, కుడి, మధ్య, మరియు జస్టిఫై వంటి టెక్స్ట్ యొక్క అమరికను సెట్ చేయవచ్చు.
ఇప్పుడు, మేము 'ని ఉపయోగిస్తాము టెక్స్ట్-అలైన్ ” ఇచ్చిన లింక్‌లను మధ్యకు సమలేఖనం చేయడానికి.
ఉదాహరణ
వెబ్ పేజీలో లింక్‌ను మధ్యలో ఉంచడానికి, మేము
ట్యాగ్ లోపల HTMLలో లింక్‌ని జోడిస్తాము. అలా చేయడానికి, హైపర్‌లింక్‌ను నిర్వచించడానికి మరియు అవసరమైన సైట్ చిరునామాను ఇవ్వడానికి ట్యాగ్‌ని ఉపయోగించండి. ఆ తర్వాత, లింక్ పేరును పేర్కొనండి. మా విషయంలో, మేము మా Linuxhint వెబ్‌సైట్‌కి లింక్‌ని జోడించాము.HTML
< శరీరం >< a href = “https://linuxhint.com/” > Linux < / a >
< / శరీరం >
దిగువ అందించబడిన చిత్రం డిఫాల్ట్‌గా ఎడమ వైపున ఉంచబడిన లింక్ జోడించబడిందని సూచిస్తుంది:
ఇప్పుడు లింక్‌ను మధ్యలో ఉంచడానికి CSSకి తరలించండి.
ఇక్కడ, మేము ఉపయోగిస్తాము ' a ” జోడించిన లింక్‌ని యాక్సెస్ చేయడానికి. ఆ తర్వాత, టెక్స్ట్-అలైన్ విలువను ''గా సెట్ చేయండి కేంద్రం 'మరియు ప్రదర్శించు' నిరోధించు ”. ఫలితంగా, మూలకం బ్లాక్ ఎలిమెంట్‌గా జోడించబడుతుంది, కొత్త లైన్‌లో ప్రారంభించి మొత్తం వెడల్పును తీసుకుంటుంది.
CSS
a {టెక్స్ట్-అలైన్ : కేంద్రం ;
ప్రదర్శన : నిరోధించు ;
}
గమనిక: CSS టెక్స్ట్-సమలేఖనం ప్రాపర్టీ ట్యాగ్‌ను మధ్యలో ఉంచడానికి మాత్రమే పని చేయదు. కాబట్టి, మీరు తప్పక ఉపయోగించాలి ' ప్రదర్శన 'ఆస్తి మరియు దాని విలువను సెట్ చేయండి' నిరోధించు ” లింక్‌ను మధ్యలో ఉంచడానికి.
ఇప్పుడు, HTMLకి తరలించి, కింది ఫలితాన్ని చూడటానికి దాన్ని అమలు చేయండి. ఇక్కడ, వెబ్‌పేజీ మధ్యలో లింక్ సమలేఖనం చేయబడిందని మీరు చూడవచ్చు:
మధ్యలో ఉన్న లింక్‌ను సమలేఖనం చేయడానికి రెండవ పద్ధతికి వెళ్దాం.
విధానం 2: 'మార్జిన్' ప్రాపర్టీని ఉపయోగించి CSSలో సెంటర్ లింక్‌లు
CSS లో, ' మార్జిన్ ”ఆస్తి లింక్‌ను మధ్యలో ఉంచడానికి ఉపయోగించబడుతుంది. ఇది సంక్షిప్తలిపి ఆస్తి ' మార్జిన్-ఎడమ ',' మార్జిన్-కుడి ',' మార్జిన్-టాప్ ', మరియు' అంచు-దిగువ 'గుణాలు. మీరు ఇచ్చిన అన్ని లక్షణాల విలువలను ఒకే లైన్‌లో సెట్ చేయవచ్చు.
వాక్యనిర్మాణం
మార్జిన్ ప్రాపర్టీ యొక్క సింటాక్స్:
మార్జిన్ : దానంతట అదే | టాప్ కుడి దిగువన వదిలేశారుపైన అందించిన సింటాక్స్ యొక్క వివరణ క్రింద ఇవ్వబడింది:
- దానంతట అదే: ఇది బ్రౌజర్ ప్రకారం మూలకాలను సెట్ చేయడానికి ఉపయోగించబడుతుంది.
- టాప్: ఇది ఎగువ నుండి మార్జిన్ను సెట్ చేయడానికి ఉపయోగించబడుతుంది.
- కుడి: ఇది కుడివైపు నుండి మార్జిన్ను సెట్ చేయడానికి ఉపయోగించబడుతుంది.
- బటన్: దిగువ నుండి మార్జిన్ సెట్ చేయడానికి ఇది ఉపయోగించబడుతుంది.
- ఎడమ: ఇది ఎడమ నుండి మార్జిన్ను సెట్ చేయడానికి ఉపయోగించబడుతుంది.
గమనిక: రెండు విలువలను పేర్కొనడం ఎగువ మరియు దిగువ నుండి మార్జిన్ను మరియు ఎడమ మరియు కుడి నుండి మార్జిన్ను సూచిస్తుంది; అయితే, ఒక విలువ జోడించబడితే, మార్జిన్ నాలుగు వైపులా వర్తించబడుతుంది.
ఉదాహరణకి వెళ్దాం, ఇక్కడ మేము లింక్‌ను 'ని ఉపయోగించి మధ్యలో ఉంచుతాము. మార్జిన్ ”ఆస్తి.
ఉదాహరణ
ముందుగా డిస్ప్లే ప్రాపర్టీ విలువను ఇలా సెట్ చేయండి నిరోధించు 'మరియు వెడల్పు' 70px ”. ఆ తర్వాత, మార్జిన్ ప్రాపర్టీని వర్తింపజేసి, దాని విలువను “కి సెట్ చేయండి దానంతట అదే ”:
a {ప్రదర్శన : నిరోధించు ;
వెడల్పు : 70px ;
మార్జిన్ : దానంతట అదే ;
}
గమనిక: ది ' ప్రదర్శన 'మరియు' వెడల్పు ” ఆస్తి సెట్ అవసరం; లేకపోతే, ' మార్జిన్ ”ఆస్తి పనిచేయదు. డిస్ప్లే స్క్రీన్ యొక్క రిజల్యూషన్ మరియు టెక్స్ట్ యొక్క పొడవు ప్రకారం వెడల్పు ఆస్తి విలువను సెట్ చేయవచ్చు.
లింక్ విజయవంతంగా కేంద్రీకృతమై ఉందని మీరు ఇచ్చిన చిత్రం నుండి చూడవచ్చు:
అంతే! మేము లింక్‌ను మధ్యలో ఉంచే పద్ధతులను వివరించాము.
ముగింపు
ది ' టెక్స్ట్-అలైన్ 'మరియు' మార్జిన్ 'ఆస్తి' యొక్క సహకారంతో లింక్‌ను మధ్యలో ఉంచడానికి ఉపయోగించబడుతుంది ప్రదర్శన 'మరియు' వెడల్పు ”ఆస్తి. టెక్స్ట్-అలైన్ ప్రాపర్టీతో పాటు డిస్ప్లే ప్రాపర్టీ అవసరం, మార్జిన్ ప్రాపర్టీని ఉపయోగిస్తున్నప్పుడు, లింక్‌ను మధ్యలో ఉంచడానికి డిస్ప్లే మరియు వెడల్పు లక్షణాలు రెండూ తప్పనిసరి. ఈ గైడ్ CSSలో లింక్‌ను మధ్యలో ఉంచడానికి వివిధ పద్ధతులను చర్చించింది.