HTML లో చిత్రాన్ని ఎలా కేంద్రీకరించాలి

రచయిత: Mark Sanchez
సృష్టి తేదీ: 6 జనవరి 2021
నవీకరణ తేదీ: 1 జూలై 2024
Anonim
ఫోకస్ హోవర్ ఎఫెక్ట్స్ - HTML మరియు CSS | ▱tieflab▰
వీడియో: ఫోకస్ హోవర్ ఎఫెక్ట్స్ - HTML మరియు CSS | ▱tieflab▰

విషయము

గుణం సమలేఖనం ట్యాగ్ html> HTML5 నుండి తగ్గించబడింది. ఈ లక్షణం ఇప్పటికీ చాలా వెబ్ బ్రౌజర్‌లలో పనిచేస్తుండగా, మీరు క్యాస్కేడింగ్ స్టైల్ షీట్‌లను (CSS) ఉపయోగించి చిత్రాలను సమలేఖనం చేయాలని సిఫార్సు చేయబడింది. ఈ వ్యాసంలో, CSS మరియు నిలిపివేయబడిన ట్యాగ్‌ని ఉపయోగించి చిత్రాలను ఎలా కేంద్రీకరించాలో మేము మీకు చూపించబోతున్నాము. సమలేఖనం.

దశలు

పద్ధతి 2 లో 1: CSS (సిఫార్సు చేయబడింది)

  1. 1 చిత్రం కోసం HTML కోడ్‌ను జోడించండి. చిత్రాన్ని సమలేఖనం చేయడానికి మీరు క్యాస్కేడింగ్ స్టైల్ షీట్‌లను (CSS) ఉపయోగిస్తారు, కానీ మీరు దానిని HTML ఉపయోగించి పేజీలో ఉంచాలి. ట్యాగ్ ఉపయోగించడానికి ఒక ఉదాహరణ క్రిందిది img> మీ కోడ్‌లోకి చిత్రాన్ని చేర్చడానికి:

    img src = "dog.webp" alt = "ఇది కుక్క యొక్క చిత్రం">

    • బదులుగా కుక్క. jpg ఇమేజ్ ఫైల్ పేరును ప్రత్యామ్నాయం చేయండి మరియు "ఆల్ట్" తర్వాత ఇమేజ్ వివరణను నమోదు చేయండి. అర్థం కేంద్రం "క్లాస్" కోసం మారవద్దు, ఎందుకంటే మీరు ఆ పేరుతో CSS క్లాస్‌ని సృష్టిస్తారు.
  2. 2 CSS కోడ్‌ని కనుగొనండి. మీ సైట్‌లో ప్రత్యేక CSS ఫైల్ ఉంటే, దాన్ని తెరవండి. కాకపోతే, CSS అనేది HTML ఫైల్ ఎగువన, ట్యాగ్‌ల లోపల ఉండే అవకాశం ఉంది తల>... ట్యాగ్‌లను కనుగొనడానికి ఫైల్ ఎగువకు స్క్రోల్ చేయండి శైలి> / శైలి>.
    • ట్యాగ్‌లు ఉంటే శైలి> / శైలి> లేదు, వాటిని జోడించండి. మరింత సమాచారం కోసం ఈ కథనాన్ని చదవండి.
  3. 3 చిత్రాన్ని సమలేఖనం చేయడానికి CSS ని జోడించండి. "50%" కి బదులుగా, చిత్రం పేజీలో కనిపించేలా చేయడానికి మీరు వేరే విలువను నమోదు చేయవచ్చు. మీరు "100%" విలువతో చిత్రాన్ని మధ్యలో ఉంచలేరు, కాబట్టి ఈ సంఖ్య భిన్నంగా ఉండాలి.

    .సెంటర్ {డిస్‌ప్లే: బ్లాక్; మార్జిన్-లెఫ్ట్: ఆటో; మార్జిన్-రైట్: ఆటో; వెడల్పు: 50%; }

  4. 4 మీ మార్పులను సేవ్ చేయండి. HTML ఫైల్ మరియు CSS ఫైల్ (ఏదైనా ఉంటే) సేవ్ చేయండి. ఇది చిత్రాన్ని మధ్యలో ఉంచుతుంది.
    • లోపల ట్యాగ్‌లు కూడా img> జోడించవచ్చు ఇతర చిత్రాలను మధ్యలో ఉంచడానికి.

2 వ పద్ధతి 2: HTML లో "అలైన్" లక్షణం

  1. 1 కొత్త పేరాను సృష్టించండి. చిత్రాలను కేంద్రీకరించే ఈ పద్ధతి విస్మరించబడినప్పటికీ, ఇది ఇప్పటికీ అనేక బ్రౌజర్‌లలో పనిచేస్తుంది. అయితే, పేర్కొన్న లక్షణానికి బ్రౌజర్‌లు మద్దతునివ్వడం ఆపివేసినప్పుడు సైట్‌ను ఫంక్షనల్‌గా ఉంచడానికి CSS ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము. ఆ లక్షణాన్ని గుర్తుంచుకోండి సమలేఖనం చిత్రాన్ని చుట్టూ ఉన్న మూలకం లోపల మాత్రమే కేంద్రీకరిస్తుంది (ఉదాహరణకు, ట్యాగ్‌ల లోపల p> / p> లేదా div> / div>). ఉదాహరణగా, HTML ఫైల్‌లో, మేము జోడించడం ద్వారా కొత్త పేరాను సృష్టిస్తాము p> ప్రత్యేక లైన్‌లో.
  2. 2 చిత్రం కోసం HTML కోడ్‌ను జోడించండి. ట్యాగ్ తర్వాత కింది కోడ్‌ని నమోదు చేయండి p>... ఈ ఉదాహరణను గైడ్‌గా ఉపయోగించండి:

    p> img src = "dog.webp" alt = "picture" align = "Middle">

    • బదులుగా కుక్క. jpg ఇమేజ్ ఫైల్ పేరును ప్రత్యామ్నాయం చేయండి మరియు "ఆల్ట్" తర్వాత ఇమేజ్ వివరణను నమోదు చేయండి.
    • మధ్య లక్షణం పేజీ మధ్యలో చిత్రాన్ని ప్రదర్శించడానికి బ్రౌజర్‌కి చెబుతుంది.
  3. 3 పేరాగ్రాఫ్ ట్యాగ్‌ను మూసివేయండి. దీన్ని చేయడానికి, జోడించండి / p> చిత్రం ట్యాగ్ తర్వాత. పూర్తయిన కోడ్ ఇలా ఉండాలి:

    p> img src = "dog.webp" alt = "picture" align = "Middle"> / p>

  4. 4 మీ మార్పులను సేవ్ చేయండి. ఇది చిత్రాన్ని మధ్యలో ఉంచుతుంది.