مثال
توسيط التحالفات لكافة العناصر من مرونة <div> العنصر:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
انها محاولة لنفسك » تعريف واستخدام
تحدد الخاصية البنود محاذاة المحاذاة الافتراضية للعناصر داخل الحاوية مرنة.
Tip: استخدم خاصية محاذاة الذاتي من كل عنصر لتجاوز الخاصية البنود محاذاة.
القيمة الافتراضية: | stretch |
---|---|
وارث: | no |
Animatable: | no. Read about animatable |
الإصدار: | CSS3 |
جافا سكريبت بناء الجملة: | object .style.alignItems="center" Try it |
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit- تحدد النسخة الأولى التي عملت مع بادئة.
خاصية | |||||
---|---|---|---|---|---|
align-items | 21.0 | 11.0 | 20.0 | تسعة 7.0 -webkit- | 12.1 |
CSS بناء الجملة
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
قيم الملكية
القيمة | وصف | العبها |
---|---|---|
stretch | افتراضي. وامتدت البنود لتتناسب مع حاوية | العبها " |
center | يتم وضع البنود في وسط الحاوية | العبها " |
flex-start | يتم وضع العناصر في بداية الحاوية | العبها " |
flex-end | يتم وضع العناصر في نهاية الحاوية | العبها " |
baseline | يتم وضع البنود في الأساس من الحاوية | العبها " |
initial | تحدد هذه الخاصية إلى قيمته الافتراضية. قرأت عن الأولي | العبها " |
inherit | يرث هذه الخاصية من عنصر الأم. قراءة حول وراثة |
صفحات ذات صلة
CSS المرجعي: align-content property
CSS المرجعي: align-self property
HTML DOM المرجع alignItems property