🎁 تخفیف تمامی پکیج های آموزشی 🎁

ویژگی align در CSS - آموزش طراحی سایت

در این بخش از آموزش طراحی سایت به آموزش چینش و تراز بندی متن در CSS می پردازیم و شما را با ویژگی Align در CSS آشنا می کنیم.

ویژگی align در CSS - آموزش طراحی سایت

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

آموزش طراحی سایت

وسط چین کردن عناصر HTML

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

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش HTML

نکته: وسط چین کردن عنصر در صورتی که مشخصه width تعیین نشده باشد هیچ تاثیری نخواهد داشت.


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

برای صرفا وسط چین کردن متن درون یک عنصر، از ویژگی ;text-align: center استفاده کنید.

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

وسط چین کردن تصویر

برای وسط چین کردن یک تصویر، margin های چپ و راست را روی auto قرار دهید و عنصر img را به یک عنصر بلاک تبدیل کنید:

آموزش HTML

خروجی مثال بالا به شکل زیر است:

آموزش CSS

چپ و راست کردن متن – با استفاده از position

یک روش برای تغییر دادن مکان عناصر، استفاده از ;position: absolute می باشد. در این روش شما با استفاده از مقادیر left و right می توانید جایگاه عنصر موردنظر را تغییر داده و به سمت چپ و راست هدایت کنید. مثال زیر نحوه انجام این کار را نشان می دهد:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

چپ و راست کردن متن – با استفاده از float

روش دیگری که در بخش های قبل بصورت مفصل با آن آشنا شدیم، تغییر دادن مکان عناصر با استفاده از مشخصه float است. در این روش با استفاده از float برابر با right یا left می توان موقعیت افقی عنصر HTML را مشخص کرد. مثال زیر نحوه انجام این کار را نشان می دهد:

آموزش HTML

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

وسط چین کردن بصورت عمودی – با استفاده از padding

در CSS راه های زیادی برای وسط چین کردن یک متن در جهت محور عمودی وجود دارد. یک راه حل ساده استفاده از padding بالا و پایین می باشد. مثال زیر نحوه انجام این کار را نشان می دهد:

آموزش CSS

خروجی مثال بالا به شکل زیر است:

آموزش HTML

برای وسط چین کردن متن بصورت افقی و عمودی می توانید از ترکیب ویژگی های padding و text-align استفاده کنید:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS

وسط چین کردن عمودی – با استفاده از line-height

یک روش دیگر استفاده از مشخصه ی line-height با یک مقدار مساوی با مشخصه property می باشد. مثال زیر نحوه انجام این کار را نشان می دهد:

آموزش align در CSS

خروجی مثال بالا به شکل زیر است:

آموزش ویژگی align در CSS

وسط چین کردن عمودی – با استفاده از position و transform

اگر padding و line-height در دسترس نبودند، راه حل دیگر استفاده از  ویژگی های Position و transform است:

آموزش align در CSS

وسط چین کردن عمودی – با استفاده از Flexbox

شما همچنین می توانید از Flexbox برای وسط چین کردن اجزا استفاده کنید. فقط به خاطر داشته باشید که flexbox در اینترنت اکسپلولر 10 یا نسخه های قبلی پشتیبانی نمی شود:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS
آموزش طراحی سایت ویژگی align در CSS آموزش تراز بندی متن چیدمان متن در css

مقالات این دسته بندی