shimaB

تراز متن
متن در داخل عناصر بلوکی را می توان با تنظیم ویژگی text-align تراز کرد.

مثال
h1 {

text-align: center;

}

p {

text-align: left;

}

تراز وسط با استفاده از ویژگی margin
تراز وسط یا مرکز برای یک عنصر بلوکی یکی از مهمترین کاربردهای ویژگی margin در CSS است. به عنوان مثال، با تنظیم ویژگی margin های چپ و راست روی مقدار atuo، می توان نگهدارنده <div> را در راستای افقی در وسط تراز کرد.

مثال
div {

width: 50%;

margin: 0 auto;

}

قوانین سبک در مثال بالا، عنصر <div> را به صورت افقی در وسط تراز می کنند.

توجه: مقدار auto برای ویژگی margin در 8 Internet Explorer و نسخه های قبل از آن کار نمی کند، مگر اینکه اعلان <DOCTYPE!> تعریف شود.

تراز کردن عناصر با استفاده از ویژگی position
ویژگی position در CSS را می توان به همراه ویژگی های left، right، top وbottom  برای تراز عناصر با توجه به نمایش سند یا عنصر والد استفاده کرد.

مثال
.up {

position: absolute;

top: 0;

}

.down {

position: absolute;

bottom: 0;

}

تراز چپ و راست با استفاده از ویژگی float
از ویژگیfloat در CSS می توان برای تراز یک عنصر به سمت چپ یا راست بلوک حاوی آن به گونه ای استفاده کرد که سایر مطالب در امتداد آن جریان داشته باشند.

بنابراین، اگر یک عنصر به سمت چپ شناور شود، محتوا در امتداد سمت راست آن جریان می یابند. برعکس آن، اگر عنصر به سمت راست شناور شود، محتوا در امتداد سمت چپ آن جریان می یابند.

مثال
div {

width: 200px;

float: left;

}

حذف شناورها
یکی از گیج کننده ترین موارد درباره کار با طرح های مبتنی بر float، شکست والد (Collapsed Parent) است. به این معنا که، عنصر والد برای جای دادن عناصر شناور درون خود، به طور خودکار کشیده نمی شود. با این وجود، اگر والد هیچ پس زمینه و یا مرز قابل مشاهده ای نداشته باشد، این رویداد همیشه واضح و مشخص نیست.

 

ادامه مطلب....