در طراحی سایت ممکن است بخواهید تا همانند نرم افزار Word، متون خود را وسط چین، چپ چین و یا راست چین کنید و برای اینکار شما می توانید از قابلیت های CSS استفاده کنید.
وسط چین کردن عناصر HTML
برای وسط چین کردن یک عنصر بلاک مانند <div>، از ;margin: auto استفاده کنید. در این حالت در صورتی که عرض عنصر کمتر از عرض عنصر والدش باشد، فضای خالی به صورت مساوی بین چپ و راست عنصر تقسیم شده و عنصر در مرکز عنصر والد قرار می گیرد. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است:
نکته: وسط چین کردن عنصر در صورتی که مشخصه width تعیین نشده باشد هیچ تاثیری نخواهد داشت.
وسط چین کردن متن
برای صرفا وسط چین کردن متن درون یک عنصر، از ویژگی ;text-align: center استفاده کنید.
خروجی مثال بالا به شکل زیر است:
وسط چین کردن تصویر
برای وسط چین کردن یک تصویر، margin های چپ و راست را روی auto قرار دهید و عنصر img را به یک عنصر بلاک تبدیل کنید:
خروجی مثال بالا به شکل زیر است:
چپ و راست کردن متن – با استفاده از position
یک روش برای تغییر دادن مکان عناصر، استفاده از ;position: absolute می باشد. در این روش شما با استفاده از مقادیر left و right می توانید جایگاه عنصر موردنظر را تغییر داده و به سمت چپ و راست هدایت کنید. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است:
چپ و راست کردن متن – با استفاده از float
روش دیگری که در بخش های قبل بصورت مفصل با آن آشنا شدیم، تغییر دادن مکان عناصر با استفاده از مشخصه float است. در این روش با استفاده از float برابر با right یا left می توان موقعیت افقی عنصر HTML را مشخص کرد. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است:
وسط چین کردن بصورت عمودی – با استفاده از padding
در CSS راه های زیادی برای وسط چین کردن یک متن در جهت محور عمودی وجود دارد. یک راه حل ساده استفاده از padding بالا و پایین می باشد. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است:
برای وسط چین کردن متن بصورت افقی و عمودی می توانید از ترکیب ویژگی های padding و text-align استفاده کنید:
خروجی مثال بالا به شکل زیر است:
وسط چین کردن عمودی – با استفاده از line-height
یک روش دیگر استفاده از مشخصه ی line-height با یک مقدار مساوی با مشخصه property می باشد. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است:
وسط چین کردن عمودی – با استفاده از position و transform
اگر padding و line-height در دسترس نبودند، راه حل دیگر استفاده از ویژگی های Position و transform است:
وسط چین کردن عمودی – با استفاده از Flexbox
شما همچنین می توانید از Flexbox برای وسط چین کردن اجزا استفاده کنید. فقط به خاطر داشته باشید که flexbox در اینترنت اکسپلولر 10 یا نسخه های قبلی پشتیبانی نمی شود:
خروجی مثال بالا به شکل زیر است:
