خانه / آموزش CSS / بخش بیست و چهارم- آموزش تراز افقی و عمودی در css
پشتیبان وب سایت وردپرس
"

تاریخ بروزرسانی: ۷ فروردین ۱۳۹۸ تعداد بازدید : 10 بازدید بدون دیدگاه

بخش بیست و چهارم- آموزش تراز افقی و عمودی در css

قدم قبلی >< قدم بعدی

 

چیدمان CSS – تراز افقی و عمودی

تراز کردن عناصرمرکزی 

برای قرار دادن یک عنصر بلوک به صورت افقی (مانند <div>)، از حاشیه: auto استفاده کنید.

تنظیم عرض عنصر، از به بیرون کشیده شدن لبه های ظرف آن جلوگیری می کند.

سپس عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین دو حاشیه تقسیم می شود:

به این مثال توجه کنید:

 

نکته: اگر مقدار عرض مشخص نشده باشد تراز کردن مرکز تاثیری ندارد (یا به ۱۰۰٪ تنظیم شده باشد).

تراز کردن متن در مرکز

برای متمرکز کردن متن درون عنصر، از text-align استفاده کنید: center؛

مثال:

نکته: برای نمونه های بیشتر در مورد چگونگی تراز کردن متن، فصل Text CSS را ببینید.

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

برای قرار دادن یک تصویر، حاشیه چپ و راست را روی خودکار قرار دهید و آن را به عنصر بلوک تبدیل کنید:

مثال:

 

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

در سال های جوانتر و آسیب پذیرتر، پدرم بعضی از توصیه هایی را که من از آن در ذهنم داشت، به من داد.

مثال:

 

توجه: عناصر موضعی مطلق از جریان طبیعی حذف می شوند و می توانند عناصر را همپوشانی کنند.

چپ و راست راست – با استفاده از شناور
روش دیگری برای تراز کردن عناصر استفاده از مالکیت شناور است:

مثال:

 

بیشتر بدانید:  بخش ششم- آموزش حاشیه ها (Borders)در CSS

نکته: اگر عنصر بلندتر از عنصر حاوی آن باشد، و آن شناور است، در خارج از ظرف آن سرریز می شود. شما می توانید هشدار “clearfix” را برای رفع آن (از مثال زیر استفاده کنید) استفاده کنید.

Hack Clearfix
بدون Clearfix

با Clearfix

سپس می توانیم سرریز را اضافه کنیم: auto؛ به عنصر حاوی این مشکل رفع:

مثال:

 

مرکز به صورت عمودی – با استفاده از پوشش
روش های بسیاری برای مرکب کردن عنصر به صورت عمودی در CSS وجود دارد. یک راه حل ساده استفاده از پد بالا و پایین است:

من عمودی هستم

مثال:

 

برای تمرکز هر دو به صورت عمودی و افقی، از پد و متن استفاده کنید: مرکز:

مثال:

 

مرکز عمودی – استفاده از خط ارتفاع
یک ترفند دیگر این است که از ویژگی ارتفاع خط با مقدار برابر با ویژگی ارتفاع استفاده کنید.

من عمودی و افقی محور هستم
مثال:

 

/ * اگر متن دارای چندین خط باشد، موارد زیر را اضافه کنید: * /
.center p {
خط ارتفاع: ۱٫۵؛
نمایش: inline-block؛
عمودی تراز: وسط؛
}
مرکز عمودی – با استفاده از موقعیت و تبدیل
اگر خطوط و خط ارتفاع گزینه ها نیستند، راه حل سوم این است که از موقعیت و ویژگی تبدیل استفاده کنید:

گام قبلی >< گام بعدی

لینک کوتاه این مطلب: https://tiktheme.com/?p=16643


کانال تلگرام تیک تم

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

starone startwo enamadsh