سبد (0)

تبلیغات

خصوصیت box-align

مثال (خصوصیت box-align)

این مثال عنصر فرزند div را با استفاده از دو خاصیت box-align و box-pack در وسط قرار می دهد:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.


پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند.

مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.

مرورگر Firefox به پیشوند -moz- نیاز دارند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از خصوصیت box-align می توان نحوه ترازبندی عناصر داخل یک box را مشخص کرد.

مقدار پیشفرض stretch
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.boxAlign="center"

نحوه استفاده

box-align: start|end|center|baseline|stretch;
مقدارتوضیحاتنمایش دادن
start

برای box هایی که در جهت نرمال هستند، لبه بالایی هر فرزند هم راستای لبه بالایی box قرار می گیرد. برای box هایی که در جهت عکس قرار دارند، لبه پایینی هر فرزند، هم راستا با لبه پایینی box قرار می گیرد.

نمایش دادن »
end

برای box هایی که در جهت نرمال هستند، لبه بالایی هر فرزند هم راستای  لبه پایینی box قرار می گیرد. برای box هایی که در جهت عکس قرار دارند، لبه پایینی هر فرزند، هم راستا با لبه بالایی box قرار می گیرد.

نمایش دادن »
center

فضای اضافی به طور مساوی تقسیم می شود، نیمی از از فضا بالای فرزند و نیم دیگر در پایین فرزند قرار می گیرد. به عبارتی فرزند در وسط قرار می گیرد.

نمایش دادن »
baseline

اگر خاصیت box-orient دارای مقادیر inline-axis یا horizontal باشد، تمام فرزندان هم تراز با baseline خود قرار می گیرند.

نمایش دادن »
stretch

عنصر فرزند کشیده می شود تا تما فضا را به خود اختصاص دهد.

 

مثالs

مثال - خودتان امتحان کنید

Change the box-align value for an element
 در این مثال نحوه استفاده از JavaScript برای تغییر مقادیر box-align یک عنصر نمایش داده شده است.

دیدگاه‌ها  

0 # MiladFani 1394-06-07 13:25
"هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند."
پس برای چی عکسشون ضربدر نداره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1394-06-07 17:34
با سلام
در صورتی که متن زیر قسمت ذکر شده را مطالعه کنید متوجه خواهید شد منظور از "هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند." این است که هر کدام از مرورگر ها برای پشتیبانی نیاز به یک پیشوند دارند و بدون آن پیشوند به صورت مستقیم پشتیبانی نمی کنند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی