خصوصیت box-align
مثال (خصوصیت box-align)
این مثال عنصر فرزند div را با استفاده از دو خاصیت box-align و box-pack در وسط قرار می دهد:
{
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;
}
در انتهای این بیاموز، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند.
مرورگر Internet Explorer 10 به پیشوند -ms- نیاز دارد.
مرورگر Firefox به پیشوند -moz- نیاز دارند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خصوصیت box-align می توان نحوه ترازبندی عناصر داخل یک box را مشخص کرد.
| مقدار پیشفرض | stretch |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.boxAlign="center" |
نحوه استفاده
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| start |
برای box هایی که در جهت نرمال هستند، لبه بالایی هر فرزند هم راستای لبه بالایی box قرار می گیرد. برای box هایی که در جهت عکس قرار دارند، لبه پایینی هر فرزند، هم راستا با لبه پایینی box قرار می گیرد. |
نمایش دادن » |
| end |
برای box هایی که در جهت نرمال هستند، لبه بالایی هر فرزند هم راستای لبه پایینی box قرار می گیرد. برای box هایی که در جهت عکس قرار دارند، لبه پایینی هر فرزند، هم راستا با لبه بالایی box قرار می گیرد. |
نمایش دادن » |
| center |
فضای اضافی به طور مساوی تقسیم می شود، نیمی از از فضا بالای فرزند و نیم دیگر در پایین فرزند قرار می گیرد. به عبارتی فرزند در وسط قرار می گیرد. |
نمایش دادن » |
| baseline |
اگر خاصیت box-orient دارای مقادیر inline-axis یا horizontal باشد، تمام فرزندان هم تراز با baseline خود قرار می گیرند. |
نمایش دادن » |
| stretch |
عنصر فرزند کشیده می شود تا تما فضا را به خود اختصاص دهد. |
مثال - خودتان امتحان کنید
Change the box-align value for an element
در این مثال نحوه استفاده از JavaScript برای تغییر مقادیر box-align یک عنصر نمایش داده شده است.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7538
دیدگاه‌ها
"هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند."
پس برای چی عکسشون ضربدر نداره؟
با سلام
در صورتی که متن زیر قسمت ذکر شده را مطالعه کنید متوجه خواهید شد منظور از "هیچ کدام از مرورگرهای اصلی، خصوصیت box-align را پشتیبانی نمی کنند." این است که هر کدام از مرورگر ها برای پشتیبانی نیاز به یک پیشوند دارند و بدون آن پیشوند به صورت مستقیم پشتیبانی نمی کنند.