CSS align-items అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

align-items అనుకూలత కంటైనర్ లోని ఘటకాలకు అప్రమేయ అనుకూలత నిర్ణయించడానికి ఈ లక్షణాన్ని ఉపయోగించండి.

సలహా:ప్రతి ఘటకానికి ఉపయోగించండి: align-self ఈ లక్షణాన్ని అధిగమించే లక్షణాలు ఉన్నాయి.

ఇతర సందర్భాలు చూడండి:

CSS శిక్షణా కోర్సులు:CSS Grid

CSS శిక్షణా కోర్సులు:CSS ఫ్లెక్స్‌బాక్స్

CSS సందర్భాల పరిశీలన మాదిరిగా ఉంటుంది:align-content లక్షణం

CSS సందర్భాల పరిశీలన మాదిరిగా ఉంటుంది:align-self లక్షణం

CSS సందర్భాల పరిశీలన మాదిరిగా ఉంటుంది:justify-content లక్షణం

CSS సందర్భాల పరిశీలన మాదిరిగా ఉంటుంది:justify-items లక్షణం

CSS సందర్భాల పరిశీలన మాదిరిగా ఉంటుంది:justify-self లక్షణం

HTML DOM సందర్భాల పరిశీలన మాదిరిగా ఉంటుంది:alignItems లక్షణం

ఉదాహరణ

అనుకూలత రూపంలో ఉన్న అనుకూలత ఘటకాలను మధ్యలో కేంద్రీకరించండి:

div {
  display: flex;
  align-items: center;
}

స్వయంగా ప్రయోగించండి

CSS సంకేతాలు

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

లక్షణాన్ని విలువ

విలువ వివరణ
stretch అప్రమేయ. ఘటకం కంటైనర్ కు సరిపోయేలా స్ట్రెచ్ చేయబడుతుంది.
center ఘటకం కంటైనర్ యొక్క మధ్యలో ఉంటుంది.
flex-start ఘటకం కంటైనర్ యొక్క ప్రాంతానికి ఉంటుంది.
flex-end ఘటకం కంటైనర్ యొక్క అంతంలో ఉంటుంది.
బేస్ లైన్ ఘటకం కంటైనర్ యొక్క బేస్ లైన్ కు స్థానించబడుతుంది.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. ఈ కు మీద చూడండి: initial.
inherit ఈ లక్షణాన్ని తన ప్రాతినిధ్య ఘటకం నుండి వారసత్వం చేసుకుంది. ఈ కు మీద చూడండి: inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: stretch
వారసత్వం: సంకేతం లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ కు మీద చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
సంస్కరణ: CSS3
JavaScript సంకేతాలు: object.style.alignItems="center"

బ్రౌజర్ మద్దతు

పట్టికలో నిరూపించబడిన సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను నిరూపిస్తాయి.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0