گروه مقاله : CSS
تاريخ انتشار : 1394/02/03 - 09:25
كد :236
با استفاده از align ما می توانیم متون موجود در سند HTML را از چپ چین، راست چین و یا وسط چین نماییم .
برخی از عناصر block هستند به گونه ای که تمام عرض فضای افقی که در آن قرار دارند را اشغال می کنند و همینطور از نظر عمودی نیز به اندازه یک خط از بالا و یک خط از پایین فضا اشغال می کنند. مانند h1 , p , div
align کردن توسط margin :
عناصر block را می توان توسط margin وسط قرار داد. به گونه ای که با قرار دادن margin-right و margin-left به صورت auto عنصر block از نظر افقی وسط قرار می گیرد.
نکته : این موضوع توسط IE8 و ماقبل پشتیبانی نمی شود مگر آنکه از <DOCTYPE html!> استفاده نمایید.
به مثال زیر توجه نمایید.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</body>
</html>
ردیف کردن از چپ یا راست با استفاده از خاصیت position :
یکی از متد ها استفاده از ;position: absolute می باشد.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>
موارد مربوط به سازگاری مرورگر ها Crossbrowser compatibility :
هنگامی که عناصر را در کنار یکدیگر ردیف می کنید برای جلوگیری از اختلاف بصری در مرورگر های مختلف، باید یک پیش تعریف قرار دهید تا در مرورگر های مختلف یکسان دیده شود.
هنگامی که از خاصیت position استفاده می کنید یک مشکل در مرورگرهای ie8 و ماقبل بوجود می آید. زمانی که شما یک عنصر با width مشخص را به عنوان ظرفی برای قرار دادن سایر عناصر تعریف می کنید (یا به عبارت دیگر بعد از تگ <body> ، سایر عناصر موجود در سند HTML را داخل یک div قرار می دهید<"div class="container> ) و گذاشتن !DOCTYPE را فراموش می کنید، Ie8 و ما قبل به صورت پیش فرض 17px از سمت راست margin اعمال می کند که باعث ایجاد اسکرول افقی می شود. یادتان باشد هنگامی که از خاصیت position استفاده می کنید حتما DOCTYPE! را نیز در داخل سند خود قرار دهید.
در مثال زیر علاوه بر استفاده از !DOCTYPE به صورت پیش فرض مقدار margin و padding در body ، صفر در نظر گرفته شده است.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</div>
</body>
</html>
ردیف کردن از راست و چپ با استفاده از خاصیت float :
یکی از راه های موجود برای این کار استفاده از خاصیت float می باشد که این خاصیت می تواند مقادیر right و left را بپذیرد. مثال :
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>
موارد مربوط به سازگاری مرورگر ها Crossbrowser compatibility :
هنگامی که عناصر را در کنار یکدیگر ردیف می کنید برای جلوگیری از اختلاف بصری در مرورگر های مختلف، باید یک پیش تعریف قرار دهید تا در مرورگر های مختلف یکسان دیده شود.
هنگامی که از خاصیت float استفاده می کنید و گذاشتن !DOCTYPE را فراموش می کنید، Ie8 و ما قبل به صورت پیش فرض 17px از سمت راست margin اعمال می کند که باعث ایجاد اسکرول افقی می شود. یادتان باشد هنگامی که از خاصیت float استفاده می کنید حتما !DOCTYPE را نیز در داخل سند خود قرار دهید.
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</body>
</html>