ترفندهای CSS که اغلب نمیدانیم!

در این مقاله،٢۵ترفند CSS بسیار مفید مطرح شده است که به شما کمک می کند صفحات وب بسیار عالی طراحی کنید. ممکن است شما برخی یا همه ی این ترفند ها را از قبل بلد باشید، با این حال، این می توانید یک مرجع دم دستی برای ترفند های جذاب CSS برای شما باشد که باید بدانید.
١ - تغییر رنگ متن در حالت انتخاب شده
ممکن نیست که این ترفند را بلد بوده باشید!
شما به کمک CSS می توانید رنگ متن صفحات وب را در حالت انتخاب شده مشخص کنید. این ترفند دست کم در مرورگر های جدید نظیر safari و firefox کار می کند.

/**
* Safari and Opera
*/
::selection {
background: #c3effd;
color: #000;
}
/**
* Firefox
*/
::-moz-selection {
background: #c3effd;
color: #000;
}

همانطور که می بینید، با استفاده از انتخابگر ::selection می توانید متن های انتخاب شده را هدف قرار دهید.

٢ - جلوگیری از جهش اسکرول فایرفاکس
اگر سایز محتوا از سایز پنجره کمتر باشد، معمولا فایرفاکس اسکرول را مخفی می کند.
مشکلی که گاها پیش می آید این است که در صورتی که به هر دلیل سایز محتوا تغییر کند یا سایز پنجره نسبت به محتوا تغییر کند، نوار اسکرول مجددا ظاهر می شود و باعث تولید جهش در صفحه می شود.
در صورتی که می خواهید اسکرول همواره در فایرفاکس نمایان باشد، می توانید از دستور زیر استفاده کنید:

html {
overflow-y: scroll;
}

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

به کمک CSS می توانید محل شکسته شدن صفحات و رفتن به صفحه ی بعد در هنگام پرینت را کنترل کنید. فقط کافی است که کد CSS زیر را به استایل های خود اضافه کنید و سپس به هر تگی که می خواهید در صفحه ی بعد چاپ شود، کلاس page-break را انتساب دهید.

.page-break {
page-break-before: always;
}

۴ - استفاده از دستور !important

طراحان با تجربه، از کاربرد این دستور اطلاع دارند، اما معمولا تازه کارها، از این دستور !important در CSS بی اطلاع هستند و تعجب می کنند.
با افزودن دستور !important به انتهای دستور css تان، اولویت دستور مورد نظر را نسبت به دستورات دیگر که با آن در تضاد هستند، افزایش می دهید.
در کد زیر، رنگ زمینه، به دلیل وجود !important آبی خواهد بود (و نه قرمز)

.page {
background-color: blue !important;
background-color: red;
}

کاربرد روش فوق وقتی است که شما یک css rule می نویسید، اما متوجه می شوید که هیچ تاثیری ندارد! دلیل این مسئله احتمالا این است که یک دستور دیگر با اولویت بالاتر وجود دارد که اثر دستور شما را خنثی می کند.
برای این که دستور شما اولویت بالا تری داشته باشد و اثر دستورات دیگر را خنثی کند، می توانید از !important استفاده کنید.

۵ - جایگذاری متن با تصویر
این ترفند در مقاله ی قبلی شرح داده شده است:
۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!

۶ - ارتفاع حداقل که در تمامی مرورگر ها کار می کند.

متاسفانه مرورگر Internet Explorer دستور min-height در CSS را درک نمی کند و لذا نمی توان با دستور فوق، ارتفاع حد اقل را در IE مشخص نمود.

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

#container{
/* all browsers except ie6 will respect the !important flag */
height: auto !important;
min-height: 500px;
/* Should have the same value as the min height above */
height: 500px;
}

٧ - مشخص کردن لینک هایی که در پنجره ی جدید باز می‌شوند.

کد CSS زیر سبب می شود که لینک هایی که در پنجره ی جدید باز می شوند، را با استایل ویژه نمایان می کند. به این ترتیب، بازدیدکنندگان سایت، قبل از این که بر روی لینک کلیک کنند، می دانند که این لینک در یک پنجره یا تب جدید باز خواهد شد

a[target="_blank"]:before,
a[target="new"]:before {
margin: 0 5px 0 0;
padding: 1px;
outline: 1px solid #333;
color: #333;
background: #ff9;
font: 12px "Zapf Dingbats";
content: "279C";
}

در کد فوق چند نکته وجود دارد که خوب است به آنها توجه کنید:

به انتخابگر a[target="_blank"] توجه کنید. در CSS می توان تگ های html را بر اساس مقادیر خواص آن ها فیلتر کرد. برای این منظور همانطور که می بینید، مقدار خواص را در درون [] قرار می دهیم. در این دستور لینک هایی که دارای خاصیت target="_blank" هستند را انتخاب کرده ایم. یعنی لینک هایی که در یک تب جدید باز می شوند.
به کلاس کاذب :before و :after توجه کنید. این دو کلاس، تگ خاصی را هدف نمی گیرند، بلکه فقط یک نقطه ی خالی در قبل یا بعد تگ مربوطه را انتخاب می کنند.
به دستور content در CSS توجه کنید. به کمک دستور content می توان یک کاراکتر یا یک متن را در قبل یا بعد از یک تگ قرار داد. توجه کنید که دستور content فقط زمانی قابل استفاده است که از کلاس کاذب :after و یا :before استفاده شده باشد.
در کد فوق، ما یک علامت 279C که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم.

٨ - استایل دهی به لیست های مرتب به شیوه ی متفاوت

Ordered list style

استایل دهی به اعداد یک لیست مرتب (شماره گذاری شده) به شیوه ای متفاوت نسبت به باقی متن هریک از آیتم های لیست.
در کد زیر، همانطور که می بینید، یک فونت را برای تگ ol تعریف کرده ایم و بعد برای تگ p ی درون آن، مجددا فونت را تغییر داده ایم. به این ترتیب، استایل خود لیست (شامل اعداد لیست) با محتوای آن (که باید در درون p قرار گرفته باشد) متفاوت خواهد بود.

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

٩ - استفاده از حروف بزرگ در اولین حرف مقاله

Drop caps

شما می توانید حرف اول مقاله تان را همانند روزنامه ها و مجلات، بزرگ کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب :first-letter استفاده کنید.

p:first-letter {
display: block;
margin: 5px 0 0 5px;
float: left;
color: #FF3366;
font-size: 3.0em;
font-family: Georgia;
}

١٠ - شفافیت به گونه ای که در تمام مرورگر ها کار کند

گرچه CSS 3 خاصیت جدید opacity را برای شفافیت معرفی کرده است، اما همه ی مرورگرها از آن پشتیبانی نمی کنند. این یک ترفند CSS برای شفافیت در همه ی مرورگرها می باشد

.transparent_class {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

١١ - موقعیت دهی عمودی در وسط با line-height

این ترفند در مقاله ی قبلی شرح داده شده است:
۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!
١٢ - طرح ثابت در وسط صفحه
این ترفند در مقاله ی قبلی شرح داده شده است:
۱٠ ترفند CSS که احتمالا تا کنون نمی دانستید!
١٣ - حذف اسکرول عمودی در textarea ها در IE

مرورگر Internet Explorer بدون توجه به ارتفاع متن، یک اسکرول عمودی به کادر های متنی textarea اضافه می‌کند. با استفاده از روش زیر می توانید مشکل فوق را برطرف نمایید

textarea{
overflow: auto;
}

١۴ - حذف حاشیه از لینک های فعال

برخی از مرورگر ها مانند فایرفاکس و IE دور لینک هایی که کاربر کلیک می کند، یک حاشیه ی نقطه چین نمایش می دهند. این یک ویژگی مفید است و به این ترتیب، کاربر می تواند بفهمد که روی کدام لینک کلیک کرده است و یا در حال حاضر فوکوس بر روی کدام لینک قرار دارد. با این حال، این ویژگی گاها باعث زشت شدن لینک می شود. برای حذف این حاشیه می توانید از کد زیر استفاده کنید:

a:active, a:focus {
outline: none;
}

١۵ - جلوگیری از مخفی شدن عناصر در IE

گاهی اوقات مرورگر IE به شیوه ی خاصی رفتار می کند و سبب می شود که برخی عناصر مخفی شوند. و هنگامی که با موس چیزی را انتخاب می کنیم، مجددا عناصر مخفی شده، ظاهر می شوند. این مشکل به سبب برخی باگ ها در IE به هنگام برخورد با عناصر شناور (float) به وجود می‌آید. این مشکل با افزودن دستور position: relative به عناصری که مخفی می شوند، قابل حل می باشد.
١۶ - آیکون های خاص بر اساس خواص

انتخاب گرهای خواص در CSS بسیار قدرمند هستند و به شما امکانات زیادی را برای کنترل استایل عناصر متفاوت می دهند. به عنوان مثال شما می توانید بر اساس مقدار href در لینک ها (یا به عبارت دیگر، بر اساس مقصد لینک ها)، یک آیکون متفاوت را در سمت چپ لینک ها قرار دهید.

به این روش شما می توانید آیکون های متفاوتی را به لینک هایی که به یک فایل pdf یا یک فایل word اشاره می کنند انتساب دهید و کاربر قبل از این که کلیک کند، می داند که مقصد این لینک، فایل pdf است یا تصویر است یا ...

a[href$='.doc'] {
padding: 0 20px 0 0;
background: transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

١٧ - نشانگر pointer در CSS

با استفاده از خاصیت cursor می توانید شکل اشاره گر موس را تغییر دهید. مقدار cursor: pointer سبب می شود که اشاره گر موس شبیه دست (مانند لینک ها) بشود.

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

input[type=submit], label, select, .pointer {
cursor: pointer;
}

١٨ - با حروف درشت نوشتن متن

برای این که کلیه ی حروف یک متن با استفاده از حروف بزرگ نمایش داده شود، می توانید از دستور text-transform استفاده کنید. این دستور معمولا برای نمایش دادن عنوان صفحات مفید است.

text-transform: capitalize;

١٩ - حروف درشت کوچک

با استفاده از دستور زیر، می توانید کلیه ی حروف متن مورد نظر را با استفاده از حروف بزرگ (capital) بنویسید اما سایز حروف هر کلمه نسبت به حرف اول آن کلمه کوچک تر خواهد بود (small caps)

font-variant: small-caps;

٢٠ - پررنگ کردن فیلد های ورودی متنی

با استفاده از روش زیر می توانید فیلد های متنی که فوکوس را در اختیار دارند را highlight کنیم. البته این روش در IE کار نخواهد کرد

input[type=text]:focus, input[type=password]:focus {
border:2px solid #000;
}

٢١ - حذف حاشیه ی تصویر لینک شده

در زیر لینک های تصویری (تصاویری که در درون لینک قرار گرفته باشند) یک حاشیه ی آبی رنگ زشت نمایش داده می شود. بهتر است که این حاشیه ی زائد را برای همه ی لینک های تصویری حذف کنیم و اگر مورد خاصی را خواستیم با حاشیه نمایش دهیم، مجددا حاشیه را به آن اضافه کنیم. برای این منظور، از دستور زیر استفاده می کنیم:

a img {
border: none;
}

٢٢ - مرتب سازی فرم ها بدون استفاده از جدول

Tableless form

آن زمانی که برای استایل دهی و مرتب سازی فرم ها از جدول ها استفاده می شد، گذشت. CSS به شما اجازه می دهد که فرم های قابل دسترس ایجاد کنید که دارای طرحی مشابه جدول باشند اما از جدول به هیچ عنوان در آن ها استفاده نشده باشد.

برای این منظور از تگ <label> استفاده می کنیم. با استفاده از تگ label می توانیم مطمئن شویم که دسترسی پذیری فرم بیشتر خواهد شد. در زیر یک نمونه کد HTML و CSS مربوطه برای ایجاد یک فرم بدون استفاده از جدول آمده است و می توانید از آن به عنوان الگو برای طراحی فرم هایتان استفاده کنید:

کد HTML

<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
</p>
<p><label for="password" >Username</label>
<input type="password" id="password" name="pass" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>

کد CSS

p label{
width: 100px;
float: left;
margin-right: 10px;
text-align: right;
}

به خاصیت for در تگ label توجه کنید. for در واقع id ی عنصری است که این label برای آن تهیه شده است. label ها برچسب هایی هستند که برای کادر های متنی و ... در صفحه قرار می گیرند. باید با خاصیت for مشخص کنیم که این label برای کدام عنصر می باشد.

٢٣ - انتخاب یک سایز پایه‌ی مناسب برای صفحه
تنظیم سایز فونت به طور مناسب به 62.5% در تگ <body> باعث می شود که 1em به لحاظ سایز معادل 10px باشد. این کار به شما اجازه می دهد که به سادگی و آسانی از واحد em استفاده کنید و بدانید که معادل آن به پیکسل چقدر است.

body {
font-size: 62.5%;
}

٢۴ - پر رنگ کردن تگ های acronym و abbr
تگ acronym برای نوشتن علامات اختصاری سرنام کلمات مفید است و تگ abbr برای نوشتن کلمات اختصاری می باشد.
تگ های acronym و abbr اطلاعات مفیدی را برای کاربران، مرورگرها و موتور های جستجو فراهم می کنند. اما بیشتر مرورگرها، به جز فایرفاکس، این تگ ها را به طور متفاوتی نمایش نمی دهند.

در زیر ترفند CSS برای highlight کردن تگ های acronym و abbr آمده است.

acronym, abbr{
border-bottom: 1px dotted #333;
cursor: help;
}

٢۵ - بازنشانی CSS توسط Eric Meyer
قطعه کد CSS زیر کلیه ی مقادیر پیش فرض مرورگر را بازنشانی می کنند و سبب می شود که کدهای css شما در تمامی مرورگر به گونه ی یکسان کار کند و ناسازگاری مرورگر ها را خنثی می کند.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/**
* remember to define focus styles!
*/
:focus {
outline: 0;
}
/**
* remember to highlight inserts somehow!
*/
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/**
* tables still need 'cellspacing="0"' in the markup
*/
table {
border-collapse: collapse;
border-spacing: 0;
}

- دستور کوتاه شده‌ی تنظیم فونت‌ها

برای تنظیم فونت ها در CSS احتمالا تا کنون به طریق زیر عمل می کردید:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

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

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

روش فوق خیلی بهتر است، اما باید فقط به یک نکته توجه کنید که روش فوق فقط وقتی کار خواهد کرد که هر دو خاصیت font-family و font-size را مشخص کنید. مقدار font-family همواره باید در انتهای خط قرار بگیرد و font-size باید دقیقا قبل از font-family قرار بگیرد.

به طور خلاصه می توان چنین نوشت:

font: FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY;

نکته ی دیگر این که اگر مقادیر font-weight و font-style و font-variant را مشخص نکنید، مقادیر همه ی این ها به طور پیش فرض برابر normal است.
٢ - استفاده از دو کلاس با هم

شما می توانید به هر تگ html بیش از یک کلاس انتساب دهید به این ترتیب که در خاصیت class چند تا کلاس را به استفاده از space از هم جدا می کنید:

به این ترتیب، در css کلیه ی rule هایی که به هر یک از کلاس های موجود انتساب داده شده باشد، برای آن تگ html استفاده خواهد شد.
توجه کنید که اگر برای یکی از کلاس ها، یک css rule تعریف شده باشد و برای کلاس بعدی rule متضاد آن تعریف شده باشد، کلاسی که در html اول آمده باشد، اولویت بیشتری خواهد داشت.
٣ - مقدار پیش‌فرض border در CSS

هنگامی که border را برای یک عنصر تعریف می کنید، معمولا مقادیر width و color و style را مشخص می کنید. برای مثال دستور زیر برای شما یک حاشیه‌ی سیاه رنگ یکنواخت به قطر 1 پیکسل ایجاد می کند:

border: 3px solid #000;

ولی در دستور فوق، تنها گزینه ای که الزامی است، style است. یعنی border: solid

اگر فقط بنویسید border: solid برای سایر خصوصیات از مقدار پیش فرض استفاده خواهد شد. اما مقادیر پیش فرض، چه چیزی هستند؟
مقدار پیش فرض برای عرض حاشیه (border-width) برابر medium است که تقریبا معادل 3 الی 4 پیکسل می باشد
مقدار پیش فرض برای رنگ حاشیه (border-color) برابر رنگ متن درون حاشیه در نظر گرفته می شود.
در صورتی که مقادیر پیش فرض، برای شما مناسب است، می توانید مقدار آن ها را مشخص نکنید تا از مقدار پیش فرض استفاده شود.
۴ - کد CSS مخصوص پرینت

اکثر صفحات وب به گونه ای طراحی می شوند که برای نمایش در مانیتور کامپیوتر مناسب باشد. اما اگر تصویر صفحه ی وب را با استفاده از پرینتر بر روی کاغذ چاپ کنیم، زیاد جالب نمی شود.

معمولا بهتر است که در هنگام چاپ یک صفحه ی وب، فقط مطالب مهم آن چاپ شود و همچنین نیازی به جلوه های گرافیکی و رنگ زمینه و ... نیست. عرض صفحه باید با عرض کاغذ سازگار باشد و از فضای کاغذ به طور بهینه استفاده شود و ...

برای رسیدن به این هدف، اکثرا وب سایت ها، صفحاتی را به طور اختصاصی برای پرینت طراحی می کنندو به این معنی که هر صفحه یا مقاله را در یک نسخه ی جداگانه برای پرینت هم تهیه می کنند.
اما روش دیگری هم وجود دارد و آن این است که کدهای css متفاوتی را برای پرینت بنویسیم

برای این منظور، باید در تگ head یک فایل css جدید را برای print مشخص کنیم و باید خاصیت media را در تگ link با مقدار "print" مشخص کنیم

خاصیت media مشخص می کند که فایل css فوق برای چه ابزاری قابل استفاده است. screen به معنی صفحه نمایش کامپیوتر است و print به معنی پرینتر است. با استفاده از دستور فوق، زمانی که کاربر می خواهد صفحه ی وب را پرینت بگیرد، به طور خودکار از فایل css دوم استفاده خواهد شد.

اما در داخل فایل printstyle.css چه کدی بنویسیم؟ کافی است کدهایی بنویسیم که صفحه برای کاغذ بهینه شود. برای این منطور معمولا باید نوارهای کناری سایت را با استفاده از دستور display:none مخفی کنیم زیرا معمولا شامل اطلاعات مفیدی برای چاپ نمی باشند. همچنین باید رنگ زمینه ی عناصر را حذف کنیم و کلیه ی عناصر و تصاویر گرافیکی که جنبه ی تزئینی دارند را حذف کنیم و همچنین می توانیم فونت مناسب چاپ استفاده کنیم و برای سایز فونت ها هم از واحد هایی مانند pt استفاده کنیم...
۵ - تکنیک جایگذاری تصویر

همواره توصیه می شود که برای نمایش متن، از کد عادی html استفاده کنید و از تصویر برای نمایش متن پرهیز نمایید. این باعث می شود که سرعت بارگذاری صفحه ی وب بالا برود و همچنین صفحه ی وب بیشتر قابل دسترس باشد (به عنوان مثال برای افراد نا بینا با استفاده از مرورگر های صفحه خوان)

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

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

<h1>Buy online</h1>

برای حل این مشکل می توان از تکنیک جایگذاری تصویر با متن استفاده کرد: متن را با کد عادی html می نویسیم و سپس به کمک css تصویر را با متن جایگزین می کنیم

h1 {
background: url(buy-image.gif) no-repeat;
height: 100px;
text-indent: -2000px;
}

اطمینان حاصل کنید که مقدار ارتفاع تصویر را به درستی مشخص کنید.
با روش فوق، متن 2000 پیکسل به سمت صفحه ی نمایش خواهد رفت و از صفحه خارج خواهد شد و دیگر نمایش داده نمی شود و به جای آن تصویر نمایش داده می شود.
توجه کنید که این کار سبب می شود که کاربرانی که نمایش تصویر را در مرورگر خود غیر فعال کرده اند، قادر به مشاهده ی متن نخواهند بود.
۶ - جایگزین CSS box model hack

...
٧ - موقعیت دهی یک عنصر بلوکی در وسط

برای ایجاد یک طرح با عرض ثابت در وسط صفحه، یک روش این است که کل محتویات صفحه را داخل یک <div> قرار دهید. توجه کنید که <div> یک عنصر بلوکی است.
برای قرار دادن یک عنصر بلوکی در وسط، کافی است که عرض آن را مشخص کنید و سپس margin چپ و راست آن را با مقدار auto مشخص کنید. به عنوان مثال:

div#content {
width: 700px;
margin: 0 auto
}

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

اما روش فوق در نسخه های قدیمی مرورگر IE کار نمی کند. برای این که این روش در تمامی مرورگر ها کار کند، می توانیم از تکنیک زیر استفاده کنیم:

body {
text-align: center;
}
div#content {
width: 700px;
margin: 0 auto;
}

توجه کنید که text-align را برای عنصر body برابر center در نظر گرفتیم. به این ترتیب همه ی عناصر در وسط صفحه متمرکز می شوند. اما از آن جایی که می خواهیم عناصر در سمت چپ باشند، مجددا مقدار text-align را برای div مورد نظرمان مقدار دهی می کنیم.
به این ترتیب روش فوق در مرورگرهای قدیمی هم کار خوهد کرد.
٨ - چیدمان عمودی با CSS

چیدمان عمودی با استفاده از table ها یک روش ابلهانه بود! در جدول ها، برای این که محتوای یک خانه، به لحاظ عمودی در وسط خانه‌ی جدول قرار گیرد، می توانستیم از خاصیت vertical-align با مقدار middle استفاده کنیم.

اما این روش در یک طرح مبتنی بر CSS کار نخواهد کرد.
تصور کنید که یک منوی ناوبری در سایت دارید که ارتفاع آن به اندازه ی 2em مقدار دهی شده است. اکنون در CSS از دستور vertical-align استفاده می کنید.
اما استفاده از vertical-align هیچ تاثیری نخواهد گذاشت و متن همچنان در بالای باکس قرار خواهد گرفت!

پس چه باید کرد؟
کافی است که مقدار line-height را برابر height عنصر مورد نظر قرار دهید!
در این جا ارتفاع عنصر مورد نظر ما 2em است، لذا به سادگی کافی است که مقدار line-height را برابر 2em تنظیم کنیم و متن در وسط باکس قرار خواهد گرفت.
٩ - موقعیت دهی درون یک ظرف

یکی از بهترین ویژگی های CSS این است که می توانید یک عنصر را مطلقا در هر جایی از صفحه ی وب قرار دهید.
همچنین این امکان وجود دارد (و اغلب توصیه هم می شود) که یک عنصر را در درون یک ظرف نگهدارنده موفعیت دهی کنید. برای این منظور کافی است که دستور زیر را برای تگ نگهدارنده بنویسید:

#container {
position: relative;
}

از این پس، هر عنصری که در #container قرار بگیرد، موقعیت دهی آن بر اساس موقعیت ظرف نگهدارنده خواهد بود. (یعنی دیگر بر اساس کل سند صفحه ی وب موقعیت دهی نمی شود.) به عنوان نمونه کد HTML زیر را در نظر بگیرید:

اکنون برای موقعیت دهی یک عنصر دقیقا 30px از سمت چپ و 5px از سمت بالای ظرف نگهدارنده، کافی است کد زیر را بنویسیم:

#navigation {
position: absolute;
left: 30px;
top: 5px;
}

البته در این مورد خاص، شما می توانستید، با استفاده از دستور margin: 5px 0 0 30px هم همین کار را انجام دهید. با این حال در برخی شرایط، بهتر است (یا لازم است) که از موقیت دهی به شیوه ی مذکور استفاده نمایید

نکته

اگر یک عنصر به موقعیت دهی (position) مطلق (absolute) در درون یک عنصر با موقعیت دهی نسبی (relative) قرار بگیرد، مقادیر top و left و bottom و right عنصر درونی، بر اساس حاشیه ی عنصر بیرونی محاسبه خواهد شد (نه بر اساس پنجره ی مرورگر)

منبع : حجازی