خانه » بلاگ » bootstrap » آموزش کامل ترازبندی متن ها در CSS + انواع ترفند
چگونه متن را در CSS وسط قرار دهیم
سلام دوستان وب یاری با دانش من، امروز یه بار دیگه با ترجمه ی یه آموزش درخصوص ریسپانسیو کردن صفحات وب و تراز افقی و عمودی متن در CSS به سراغ شما اومدم، امروز میخوام به شما یاد بدهم که طریقه ی ریسپانسیو کردن تگ پاراگراف <p> چگونه است و چطور تراز افقی و عمودی متن در CSS و html را پیاده سازی کنیم.
بازهم یه بار دیگه یه یادآوری کوچک در خصوص اصلاح ریسپانسیو برای دوستان تازه واردم به وب یار میکنم که منظور از طراحی ریسپانسیو، حالتیه که به شما اجازه میده یه وب سایتی طراحی کنید که در تمامی انواع گوناگون صحفه نمایش ها از قبیل دسکتاپ، موبایل، تبلت، و … به درستی نشون داده بشه.
تراز افقی و عمودی متن در CSS
برای اینکه متن در وسط قرار بگیرد در CSS، از ویژگی text-align استفاده کنید و آن را با مقدار “center” تعریف کنید.
بیایید با یک مثال ساده شروع کنیم. فرض کنید یک صفحه وب فقط متنی دارید و می خواهید تمام متن را در مرکز قرار دهید. سپس می توانید از انتخابگر جهانی CSS (*) یا بدنه انتخابگر نوع برای هدف قرار دادن هر عنصر در صفحه استفاده کنید. سپس ویژگی text-align را در مرکز قرار می دهید.
* {
text-align: center;
}
اگر می‌خواهید فقط یک عنصر را در وسط صفحه قرار دهید، می‌توانید یک ویژگی id به عنصر اضافه کنید و آن را با انتخابگر ID هدف‌گیری کنید. یا می توانید از CSS درون خطی استفاده کنید.
#center {
text-align: center;
}
تراز عمودی متن در وسط صفحه
شما می توانید متن را به روش های مختلفی به صورت عمودی در مرکز صفحه قرار دهید.
توجه داشته باشید که اگر می‌خواهید متن شما به صورت افقی در مرکز باشد، به سادگی ویژگی text-align را که در مرکز قرار داده شده به CSS اضافه کنید.
کاربرد CSS Padding برای تراز عمودی متن
یکی از ساده ترین راه حل ها برای این کار، استفاده از padding بالا و پایین است.
برای اعمال padding CSS به یک عنصر، می توانم از روش long form استفاده کنم و هر دو ویژگی padding-top و padding-bottom را در CSS خود تعریف کنم. یا می‌توانم از خاصیت shorthand padding استفاده کنم و سه مقدار را شامل کنم: مقدار اول نمایانگر لایه بالایی، دومی نشان‌دهنده padding چپ و راست و سومی نشان‌دهنده padding پایین است.
با استفاده از ویژگی CSS Line-Height، متن را در مرکز قرار دهید
برای وسط عمودی متن در یک عنصر، می توانید از ویژگی CSS line-height نیز استفاده کنید. شما باید ویژگی را با مقداری برابر با ارتفاع عنصر ظرف تنظیم کنید.
.center {
line-height: 150px;
height: 150px;
background: #999FF0;
}
ترازبندی عمودی متن با استفاده از موقعیت CSS و ویژگی های Transform
برای شروع، موقعیت div حاوی متن را روی نسبی تنظیم کنید. سپس پاراگراف را در div استایل کنید. ابتدا موقعیت آن را روی مطلق قرار دهید تا از جریان عادی سند خارج شود. سپس ویژگی های چپ و بالا را روی 50 درصد قرار دهید. این به مرورگر می‌گوید که لبه‌های چپ و بالای پاراگراف را با مرکز صفحه به‌صورت افقی و عمودی (یعنی 50٪ به سمت راست و پایین صفحه) ردیف کند. مشکل این است که ما نمی‌خواهیم لبه‌های پاراگراف در وسط صفحه ردیف شوند – ما می‌خواهیم مرکز پاراگراف در وسط صفحه ردیف شود.
اینجاست که ویژگی Transform CSS وارد میشود. با استفاده از روش Transform که به متد translate() معروف است، می‌توانیم پاراگراف را در امتداد محور X و Y حرکت دهیم.
.center {
position: relative;
height: 150px;
background: #999FF0;
}
.centerp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, –50%);
margin: 0;
}
ترازبندی متن را با استفاده از Flexbox در مرکز عمودی
Flexbox یکی از بهترین روش‌ها برای ترازبندی عمودی (و افقی) متن است زیرا واکنش‌گرا است و نیازی به محاسبات margin ندارد.
ابتدا باید container والد – در این مورد، div – را به عنوان یک ظرف container تعریف کنید. این کار را با تنظیم ویژگی display روی “flex” انجام می دهید. سپس، ویژگی align-item و justify-content را به «center» تعریف کنید. این به مرورگر می‌گوید که آیتم flex (div درون div) را به صورت عمودی و افقی در مرکز قرار دهد.
.center {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #999FF0;
}
کد html و css پاراگراف ریسپانسیو:
“<!DOCTYPE html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <style> .content-paragraph { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> <body> <h1>Responsive Web Site</h1> <div class=”content-paragraph “> <h2>Responsive1 </h2> <p>به وب سایت وب یار خوش آمدید,مطالب طراحی سایت ریسپانسیو را حتما مطالعه کنید. </p> <p> به وب سایت وب یار خوش آمدید,مطالب طراحی سایت ریسپانسیو را حتما مطالعه کنید</p> </div> <div class=” content-paragraph “> <h2> Responsive2</h2> <p>مطالب طراحی سایت ریسپانسیو به صورت مرحله به مرحله به شما آموزش داده میشود</p> <p> مطالب طراحی سایت ریسپانسیو به صورت مرحله به مرحله به شما آموزش داده میشود</p> </div> <div class=” content-paragraph “> <h2> Responsive3 </h2> <p>مطالب طراحی ریسپانسیو وب یار در خصوص ریسپانسیو کردن پاراگراف ها</p> <p> مطالب طراحی ریسپانسیو وب یار در خصوص ریسپانسیو کردن پاراگراف ها</p> </div> </body> </html>“
استایل این مطالب به صورت داخلی به تگ ها داده شده، و به خاطر همین کدهای سی اس اس است که پارگراف ها به صورت ریسپانسیو نشون داده می شوند.
در این مطلب انواع روش های تراز افقی و عمودی متن در CSS را باهم یاد گرفتیم.
