تراز

آموزش تراز یا تنظیم در CSS به زبان ساده

اساطیر زبان

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

تراز متن

متن در داخل عناصر بلوکی را می توان با تنظیم ویژگی 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 در ۸ 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) است. به این معنا که، عنصر والد برای جای دادن عناصر شناور درون خود، به طور خودکار کشیده نمی شود. با این وجود، اگر والد هیچ پس زمینه و یا مرز قابل مشاهده ای نداشته باشد، این رویداد همیشه واضح و مشخص نیست. اما مهم است که از این موضوع آگاهی داشته باشید و باید آن را بررسی کنید تا از طرح بندی عجیب و مشکل ناسازگاری مرورگر جلوگیری شود. تصویر زیر را مشاهده کنید:

word image 111

مشاهده می کنید که عنصر <div> به طور خودکار برای جابجایی تصاویر شناور کشیده نمی شود. می توان قبل از تگ بسته عنصر نگهدارنده با حذف ویژگی شناور پس از عناصر شناور در نگهدارنده، این مشکل را حل کرد.

حل مشکل Collapsed Parent

روش های مختلفی برای رفع مشکل Collapsed Parent وجود دارد. در بخش زیر این راه حل ها به همراه مثال توضیح داده شده اند.

راه حل ۱: شنا ور کردن نگهدارنده

ساده ترین روش برای رفع این مشکل شناور کردن عنصر والد است.

مثال

.container {

float: left;

background: #f2f2f2;

}

هشدار: این راه حل فقط در موارد محدودی کار خواهد کرد، زیرا شناور کردن والد ممکن است نتایج غیر منتظره ای به همراه داشته باشند.

راه حل ۲: استفاده از عنصر Div خالی

این یک روش قدیمی است اما یک راه حل آسان است و در همه مرورگرها کار می کند.

مثال

.clearfix {

clear: both;

}

/* html code snippet */

<div class=”clearfix”> </div>

همچنین می توان این کار را با استفاده از یک تگ <br> انجام داد. اما این روش توصیه نمی شود زیرا کد نامفهومی را به نشانه گذاری شما اضافه می کند.

راه حل ۳: استفاده از شبه عنصر after:

شبه عنصر after: همراه با ویژگی content  در بسیاری از موارد استفاده قرار می گیرد تا مسائل مربوط به حذف شناور را حل کند.

مثال

.clearfix:after {

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

کلاس clearfix. روی هر نگهدارنده ای که فرزندان شناور دارد، اعمال می شود.

هشدار: اینترنت اکسپلورر ۷ IE از شبه عنصر:after  پشتیبانی نمی کند. با این حال ۸ IE پشتیبانی می کند، اما به اعلان <DOCTYPE!> نیاز دارد.

تفاوت پک های حرفه ای ما با آموزشهای رایگان: بطور خلاصه از زمین تا آسمان! 1-پکها، جدیدترین نسخه نرم افزارها را آموزش می دهند با قابلیت های بسیار بیشتر. 2-پکها توسط متخصص آن نرم افزار، به صورت کاملا پروژه محور و با حل چالش هایی که در مسیر کار عملی و حرفه ای با آن روبرو می شوید تهیه شده اند و بعد از استفاده، کاملا برای بازار کار آماده اید! 3- متد این پکها کاملا کار شده و تا ماهها، در ذهن تان ماندگارند و یادگیری بسیار سریعتر و کاملتری خواهید داشت. آموزشهای رایگان فقط دستورات نرم افزارها را (آنهم ناقص) بیان می کنند و تازه برای ورود به بازار باید ماهها تجربه عملی هم کسب کنید !!

turned_in

چرب زبان

با این اپلیکیشن ساده، هر زبانی رو فقط با 5 دقیقه در روز، توی 80 روز مثل بلبل حرف بزن! بهترین متد روز، تقویت حافظه، آموزش تصویری. یادگیری زبان کلید یادگیری هر مهارتی در قرن 21 !


حتما بخوانید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست