آموزش CSS

آموزش CSS - ترازبندی با Alignment

زبان برنامه نویسی CSS خصوصیت های متعددی دارد که برای ترازبندی المان ها بر روی صفحات وب مورد استفاده قرار می گیرد.

ترازبندی متن:

متنی که در داخل المان سطح بلوک قرار دارد را می توان به کمک خصوصیت text-align ترازبندی کرد.

h1 {
    text-align: center;
}
p {
    text-align: left;
}

ترازبندی مرکزی به کمک خصوصیت margin:

ترازبندی مرکزی المان سطح بلوک یکی از مهم ترین کاربردهای خصوصیت margin محسوب می شود. به عنوان مثال کانتینر<div> را می توان به صورت افقی در مرکز ترازبندی کرد. اینکار را می توان با تنظیم margin چپ و راست بر روی Auto انجام داد.

div {
    width: 50%;
    margin: 0 auto;
}

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

نکته: مقدار Auto برای خصوصیت margin در اینترنت اکسپلورر 8 و نسخه های پایین تر  کار نخواهد کرد مگر اینکه <!DOCTYPE> مشخص شده باشد.

ترازبندی المان ها به کمک خصوصیت position:

خصوصیت position  به همراه خصوصیت چپ، راست، بالا و پایین را می توان برای ترازبندی المان ها بر اساس سند یا المان والد  مورد استفاده قرار داد.

.up {
    position: absolute;
    top: 0;
}
.down {
    position: absolute;
    bottom: 0;
}

ترازبندی چپ و راست به کمک خصوصیت float:

خصوصیت float را می توان برای ترازبندی المان در چپ و راست بلوک در برگیرنده آن مورد استفاده قرار داد.  اگر المان در سمت چپ شناور باشد، محتوا در سمت راست آن جریان خواهد داشت. در مقابل، اگر المان به سمت راست شناور باشد محتوا در سمت چپ جریان خواهد داشت.

div {
    width: 200px;
    float: left;
}

پاک کردن شناورها:

یکی از مباحث سردرگم کننده در مورد کار با طرح های شناور محور، والد  collapsing است. المان والد به صورت خودکار خود را برای جایگزین کردن المان شناور  گسترش نمی دهد.اگر والد در برگیرنده پس زمینه یا Border بصری قابل توجهی نداشته باشد این موضوع زیاد واضح نخواهد بود اما باید در مورد آن آگاه باشید به شکل زیر توجه کنید:

collapsed parent

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

برطرف کردن  مشکل والد Collapsed

روش های زیادی برای حل این مشکل وجود دارد. بخش زیر نحوه انجام اینکار را نشان می دهد.

راه حل اول: شناور کردن کانتینر

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

.container {
    float: left;
    background: #f2f2f2;
}

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

راه حل دوم: استفاده از Div خالی

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

.clearfix {
    clear: both;
}
/* html code snippet */
<div class="clearfix">&nbsp;</div>

شما می توانید اینکار را با تگ <br> انجام دهید. این روش توصیه نمی شود زیرا کدهای غیر معنایی به markup اضافه می کند.

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

شبه عنصر :after به همراه خصوصیت content برای حل مشکلات مرتبط با پاک کردن شناور به کار می رود.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

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

هشدار: اینترنت اکسپلورر IE7 از شبه عنصر :after  پشتیبانی نمی کند. با اینحال اینترنت اکسپلورر IE8 از آن پشتیبانی می کند اما باید برای اعلان از <!DOCTYPE> استفاده شود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...