وسط چین کردن متن و لایه

وسط‌چین کردن متن

قبلا از ویژگی align=center برای تراز وسط کردن متن درون یک تگ از نظر افقی استفاده می‌شد اما اکنون روش استاندارد، استفاده از text-align:center در استایل تگ موردنظر است.
تراز کردن متن از نظر عمودی، در انتهای همین مطلب اشاره شده است.

وسط قرار دادن لایه روی خط افقی و خط عمودی

لایه‌هایی که display:block هستند (مثل div) به صورت پیشفرض تمام width قابل دسترس‌شان را می‌پوشانند. اما در صورتی که دارای width معینی باشند، آنگاه این مساله مطرح می‌شود که چطور می‌توان کاری کرد که در هر صفحه نمایش، در وسط قرار گیرد؟ حل این مساله با استفاده از auto کردن margin چپ و راست آن div میسر است:

<div style="margin:9px auto;">.....</div>

اما جهت وسط قرار دادن یک لایه از نظر تراز عمودی، همانطور که در بالا اشاره شد، قبلا استفاده از جدول و ويژگی valign متداول بود اما در طراحی‌های جدید به دلیل برخی مشکلات از table ها برای ترسیم ساختار کلی صفحه استفاده نمی‌شود لذا بجای استفاده از ويژگی valign باید راه دیگری استفاده کنیم. پنج راه حل برای این مساله در این مطلب آورده شده و به محاسن، معایب و کاربرد هرکدام هم اشاره شده است.

تراز کردن متن با تصویر

ویژگی align=absmiddle برای تراز کردن متن در وسط تصویر از نظر عمودی بود که بیشتر برای تصاویر کوچک کاربرد داشت اما در براوزرهای مدرن این attribute منسوخ شده است و لازم است از استایل vertical-align:middle استفاده نمایید.
توصیه ما این است که در css خود این استایل را برای چند المان زیر تعریف کنید:

img, input, select, button{
    vertical-align: middle;
}

یادداشت‌های مرتبط

علیرضا معظمی

مشاوره و اجرای پروژه‌های خاص طراحی و برنامه‌نویسی وب

یادداشت‌ها

وسط چین کردن متن و لایه