آموزش CSS 3 > سایر خواص در CSS 3 > خاصیت box-align

خاصیت box-align :

این خاصیت تعیین می کند که محتویات درون یک عنصر جعبه مانند box مثل یک جدول یا تگ div به چه صورت قرار بگیرند . برای مثال می توانید تعیین کنید در وسط جعبه یا در بالای آن قرار بگیرد .  

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax box-align : start | end | center | baseline |stretch ;

خاصیت  box-align می تواند دارای یکی از  4  مقدار زیر باشد :

box-align  موارد مختلف خاصیت
توضیح مقدار
در جدول های چیدمان معمولی ( چپ به راست ) لبه بالایی محتویات جعبه در سمت بالای جعبه قرار می گیرند . اما در جدول هایی با چیدمان reverse ( راست به چپ ) لبه پایینی محتویات جدول در سمت پایین جدول قرار می گیرند .  start
در جدول های چیدمان معمولی ( چپ به راست ) لبه پایین محتویات جعبه در سمت پایین جعبه قرار می گیرند . اما در جدول هایی با چیدمان reverse ( راست به چپ ) لبه بالایی محتویات جدول در سمت بالای جدول قرار می گیرند .  end
در این حالت محتویات در مرکز جعبه قرار می گیرند . center
در این حالت محتویات جدول کش می آیند ( بزرگ می شوند ) تا فضای جدول را  کنند .  stretch

پشتیانی در مرورگر های مختلف :

   

اکثر مرورگر های مطرح به جز اکسپلورر از این خاصیت پشتیانی می کنند .

کد لازم برای پشتیانی نوع مرورگر
باید به صورت moz-box-align- نوشته شود .
باید به صورت webkit-box-align- نوشته شود .
پشتیانی نمی شود .
باید به صورت webkit-box-align- نوشته شود .

مثال :

در مثال زیر هر چهار حالت نمایش محتویات در یک جعبه را نمایش داده ایم :

< html >
  < head >
    < style >
       .box
           {
               display:-moz-box;
               display:-webkit-box;
               display:box;
               width:200px;
               height:100px;
               border:2px solid red;
            }
    < /style >


    <script>
              function ChangeBoxAlign(x) {
                    // Returns the selected option's text
                    var boxAlign = x.options[x.selectedIndex].text;
                     var div = document.getElementById("myDiv");
                    if (div.style.MozBoxAlign !== undefined)
                            {
                                        div.style.MozBoxAlign = boxAlign;
                               }
                   else if (div.style.webkitBoxAlign !== undefined)
                              {
                                         div.style.webkitBoxAlign = boxAlign;
                              }
                   else
                            {
                                        alert("Your browser doesn't support this example!");
                             }
                           }
    </script>

  </head>
<body>
       <div class="box" id="myDiv">
               <b>first child</b>
               <i>second child</i>
       </div>
       <select onchange="ChangeBoxAlign (this);" size="6">
               <option selected ="selected" />center
               <option />end
               <option />inherit
               <option />start
               <option />stretch
        </select>

</body>
</html>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟