آموزش CSS 3 > سایر خواص در CSS 3 > خاصیت box-align
خاصیت box-align :
این خاصیت تعیین می کند که محتویات درون یک عنصر جعبه مانند box مثل یک جدول یا تگ
div به چه صورت قرار بگیرند . برای مثال می توانید تعیین کنید در وسط جعبه یا در بالای
آن قرار بگیرد .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
box-align : start | end | center | baseline |stretch ;
|
خاصیت box-align می تواند دارای یکی از 4 مقدار زیر باشد :
|
توضیح
|
|
در جدول های چیدمان معمولی ( چپ به راست ) لبه بالایی محتویات جعبه در سمت بالای جعبه
قرار می گیرند . اما در جدول هایی با چیدمان reverse ( راست به چپ ) لبه پایینی محتویات
جدول در سمت پایین جدول قرار می گیرند .
|
|
در جدول های چیدمان معمولی ( چپ به راست ) لبه پایین محتویات جعبه در سمت پایین جعبه
قرار می گیرند . اما در جدول هایی با چیدمان reverse ( راست به چپ ) لبه بالایی محتویات
جدول در سمت بالای جدول قرار می گیرند .
|
|
در این حالت محتویات در مرکز جعبه قرار می گیرند .
|
|
در این حالت محتویات جدول کش می آیند ( بزرگ می شوند ) تا فضای جدول را کنند
.
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز اکسپلورر از این خاصیت پشتیانی می کنند .
|
باید به صورت 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>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :