ప్రతిస్పందించే వెబ్‌సైట్ స్క్రీన్ పరిమాణం మరియు దానిని వీక్షించే పరికర కొలతలను స్వీకరించగలదు. వెబ్‌సైట్ యొక్క ప్రతిస్పందనతో పాటు, చిత్రాలు మరియు వచనం సమలేఖనం చేయబడి మరియు ప్రతిస్పందించడం కూడా అవసరం. సమలేఖనం చేయబడిన చిత్రాలు వాటి చుట్టూ వచనాన్ని చుట్టేవి. సమలేఖనం చేయబడిన వచనం మొత్తం పేరా వలె కనిపిస్తుంది.
ఈ కథనం ప్రతిస్పందించే విధంగా చిత్రాలను మరియు వచనాన్ని సమలేఖనం చేసే పద్ధతిని పరిశీలిస్తుంది.
చిత్రాలను మరియు వచనాన్ని ప్రతిస్పందనాత్మకంగా ఎలా సమలేఖనం చేయాలి?
బూట్‌స్ట్రాప్‌ని ఉపయోగించడం ద్వారా ఇమేజ్‌లు మరియు టెక్స్ట్‌తో సహా కంటెంట్‌ను ప్రతిస్పందనాత్మకంగా సమలేఖనం చేయవచ్చు. ప్రదర్శనను అందించడానికి, మేము రెండు ఉదాహరణలను జాబితా చేసాము:
- వచనాన్ని నిలువుగా మరియు చిత్రాన్ని అడ్డంగా మధ్యకు సమలేఖనం చేయండి.
- వచనాన్ని మరియు ప్రతిస్పందించే చిత్రాన్ని ఎడమవైపు సమలేఖనం చేయండి.
ఉదాహరణ 1: వచనాన్ని నిలువుగా మరియు చిత్రాన్ని అడ్డంగా మధ్యకు సమలేఖనం చేయండి
ముందుగా, చిత్రాన్ని క్షితిజ సమాంతరంగా మరియు వచనాన్ని నిలువుగా కేంద్రీకరించడానికి ప్రయత్నించండి. ఆ ప్రయోజనం కోసం, దిగువ అందించిన సూచనలను అనుసరించండి:
దశ 1: HTML నిర్మాణాన్ని సృష్టించండి
HTML నిర్మాణాన్ని సృష్టిస్తున్నప్పుడు, ముందుగా, “ని లింక్ చేయండి బూట్స్ట్రాప్ ” మరియు బాహ్య CSS ఫైల్ కూడా. ఆ తరువాత, సృష్టించు a దశ 2: CSSని వర్తింపజేయండి కంటైనర్ మీద: పై వచనంపై: వచనం నిలువుగా కేంద్రీకృతమై ఉందని మరియు చిత్రం అడ్డంగా కేంద్రీకృతమై ఉందని గమనించవచ్చు: ఉదాహరణ 2: టెక్స్ట్ మరియు రెస్పాన్సివ్ ఇమేజ్‌ని ఎడమవైపు సమలేఖనం చేయండి ఈ ఉదాహరణలో, చిత్రం మరియు వచనం ఎడమవైపుకి సమలేఖనం చేయబడతాయి. ఆ ప్రయోజనం కోసం, క్రింది దశలవారీ సూచనలను అనుసరించండి: దశ 1: HTML నిర్మాణాన్ని సృష్టించండి HTML కోడ్ పైన పేర్కొన్న విధంగానే ఉంటుంది, ఉదాహరణలో ఉపయోగించబడింది. దశ 2: CSSని వర్తింపజేయండి కంటైనర్ మీద: పై వచనంపై: అవుట్‌పుట్ టెక్స్ట్ మరియు ఇమేజ్ ఎడమవైపు సమలేఖనం చేయబడిందని నిర్ధారిస్తుంది: చిత్రాలను మరియు వచనాన్ని ప్రతిస్పందనాత్మకంగా సమలేఖనం చేయడానికి, ముందుగా, CSSలో గ్రిడ్ లేదా ఫ్లెక్స్ లేఅవుట్‌ని సృష్టించి, ఆపై “ సమలేఖనం-అంశం 'ఆస్తి విలువకు' కేంద్రం ”. ఇలా చేయడం వలన CSSలో ఇమేజ్‌లు మరియు టెక్స్ట్ ప్రతిస్పందనాత్మకంగా సమలేఖనం చేయబడతాయి. ఈ రైట్-అప్ వినియోగదారులకు ఇమేజ్‌లు మరియు టెక్స్ట్‌లను ప్రతిస్పందనాత్మకంగా సమలేఖనం చేయడానికి పూర్తి గైడ్‌ను అందించింది. ట్యాగ్ మరియు టెక్స్ట్:
< శరీరం >
< div తరగతి = 'కంటైనర్' >
< img src = 'test-image.jpg' ప్రతిదీ = 'పరీక్ష చిత్రం' >
< div తరగతి = 'వచనం' > ఇది కొంత వచనం. div >
div >
శరీరం >
:
.కంటైనర్ {
ప్రదర్శన: ఫ్లెక్స్ ;
టెక్స్ట్-అలైన్: సెంటర్;
జస్టిఫై-కంటెంట్: సెంటర్;
సమలేఖనం-అంశాలు: కేంద్రం;
}
img {
గరిష్ట వెడల్పు: 100 % ;
ఎత్తు: ఆటో;
}
.వచనం {
ఫాంట్ పరిమాణం: 16px;
గరిష్ట వెడల్పు: 390px;
}
:
.కంటైనర్ {
ప్రదర్శన: ఫ్లెక్స్ ;
ఫ్లెక్స్-దిశ: కాలమ్;
align-items: flex-start;
టెక్స్ట్-అలైన్: ఎడమ;
}
img {
గరిష్ట వెడల్పు: 100 % ;
ఎత్తు: ఆటో;
}
.వచనం {
ఫాంట్ పరిమాణం: 16px;
గరిష్ట వెడల్పు: 390px;
}
ముగింపు