ایکون
100 قالب سایت آماده
897 هزار تومان
پیش نمایش
مجموعه مقالات وردپرس

ترازبندی افقی و عمودی متن در css

تابحال برای شما پیش آمده که بخواهید یک متن، تصویر و گاهی اوقات یک DIV را وسط چین کنید و نشده؟ دراین مقاله به بررسی کدهای تراز بندی افقی و عمودی متن را در css می پردازیم.

2
11 اسفند 1399
آخرین بروزرسانی: 20 اسفند 1402

ترازبندی افقی و عمودی در css به شما این امکان را می دهد تا جایگاه عناصر را تنظیم کنید، مثلاً می توانید متن یا تصویر را به صورت عمودی و یا افقی در وسط یا چپ و راست قرار دهید.

انواع ترازبندی های افقی و عمودی در متن

ترازبندی متن با Margin

  • برای وسط قراردادن یک عنصر بلوک مانند <div>  می توانید کد زیر را استفاده کنید:
margin: auto;

تنظیم کردن width برای عناصر، از کشیده شدن آن عنصر در کل فضای صفحه، جلوگیری می کند. مقداری را که برای width مشخص می کنید به عنصر موردنظرتان اختصاص داده می شود و به همان اندازه فضای صفحه را اشغال می کند، سپس فضای باقی مانده به طور مساوی بین دو حاشیه تقسیم می شود.

:کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید

.center {
      margin: auto;
      width: 50%;
      border: 3px solid green;
      padding: 10px;
}
توجه: اگر ویژگی width تنظیم نشود یا روی 100٪ تنظیم شود، تراز وسط هیچ تاثیری نخواهد داشت.

ترازبندی متن با Text-align

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

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.center {
      text-align: center;
      border: 3px solid green;
}
توجه: با ویژگی text-align می توانید متون و تصاویر را به سمت چپ، راست یا وسط تراز کنید.

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

.left {
    text-align: left;
    border: 3px solid green;
}
.right {
    text-align: right;
    border: 3px solid green;
}
.center {
    text-align: center;
    border: 3px solid green;
}

نتیجه مشابه زیر خواهد شد:

نتیجه کد

Computer

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

برای وسط قرار دادن یک تصویر، حاشیه چپ و راست را روی auto تنظیم کنید و آن را به یک عنصر block تبدیل کنید؛

img {    display: block;    margin: auto;    width: 40%;}

ترازبندی چپ و راست متن با position

 یک روش دیگر برای ترازبندی عناصر استفاده از position است.

position: absolute;

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.right {
      position: absolute;
      right: 0px;
      width: 300px;
      border: 3px solid #73AD21;
      padding: 10px;
}

ترازبندی چپ و راست متن با float

 روش دیگری که برای ترازبندی عناصر استفاده می شود ویژگی float است.

float: right;

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.right {
      float: right;
      width: 300px;
      border: 3px solid #73AD21;
      padding: 10px;
}
توجه:مقدار float  را می توان روی left یا right  تنظیم کرد.

وسط چین کردن عمودی با padding

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

با CSS، شما کنترل کاملی بر روی padding دارید. برای تنظیم padding برای هر عنصر(بالا، راست، پایین و چپ) خصوصیاتی بصورت مجزا می توانید تعریف کنید.

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.center {
padding: 70px 0;
border: 3px solid green;
}

وسط چین کردن عمودی با line-height

یک ترفند دیگر برای ترازبندی متن استفاده از ویژگی line-height با مقداری است که برای height تعیین می کنیم.

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

وسط چین به صورت عمودی position & transform

جز padding و line-height روش دیگری که می تواند به شما کمک کند position & transform است .

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

وسط چین به صورت عمودی با Flexbox

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

کد زیر را در این صفحه اجرا و برای درک بهتر تمرین کنید:

.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}

امیدواریم این آموزش وردپرس با عنوان تراز بندی افقی و عمودی متن در css به شما در تراز کردن متن و تصاویر وبسایتتان کمک کرده باشد.

فاطمه سامانی
فاطمه سامانی
فاطمه هستم و نزدیک به دو ساله فعالیتم تو حوزه سئو و وردپرس جدی شده. به نظر من "تنها کسی که تو دنیا می تونه کمکت کنه خودتی، پس به خودت باور داشته باش"
مقالات مرتبط
بنر
آموزش گام به گام بسته نصب آسان در لوکال هاست
اگر در لوکال هاست وب سایت خود را راه اندازی کنید می توانید یکباره وب سایت خود را به هاست منتقل کنید. یعنی بدون آنکه نیاز به هاست و دامنه داشته باشید، سایت را بدون استرس و نگرانی راه اندازی می کنید  و پس از مطمئن شدن از همه تغییرات دلخواهتان، آن را به هاست اصلی انتقال می دهید. همچنین در مصرف ...
بنر
آموزش قالب وودمارت؛ آموزش صفر تا صد طراحی فروشگاه
اگر می خواهید یک سایت حرفه ای طراحی کنید که کلیه امکانات یک فروشگاه آنلاین را داشته باشد کافی است یکی از 50 دموی فارسی و اختصاصی مانند دیجی کالا و موتن رو قالب وودمارت را نصب و استفاده کنید. همچنین این قالب فروشگاه ساز به همراه اپلیکیشن ارائه شده و کاربران می توانند یک نسخه از وب سایت را روی ...
بنر
آموزش نصب و فعالسازی ioncube در زمپ
ionCube Loader ماژولی است که برای اجرای فایل های رمزگذاری شده روی سرور نصب می شود. نصب و فعالسازی ioncube به سادگی انجام می شود. در صورت فعال نبودن ionCube شما با خطا مواجه می شوید. اما راهکار ساده رفع این خطا نصب ionCube در کمتر از چند دقیقه است که در ادامه به توضیح آن به صورت ویدئویی می پردازیم.
بنر
آموزش نصب آسان قالب وردپرس در Cpanel
شاید شما هم این جمله را شنیده باشید. در کم تر از 10 دقیقه سایت وردپرس خود را نصب کنید. در نگاه اول به نظرتان این جمله فقط یک تبلیغ برای جذب مخاطب به نظر می‌رسد اما کاملا درست است. کافی است از بسته نصب آسان وردپرس استفاده کنید تا سایت شما در کم تر از 10 دقیقه، روی هاست نصب شود. با هم نصب قالب ...
2 دیدگاه
gollognet
gollognet
29 آبان 1401 18:33

سلام و دورد خدمت شما دوست عزیز خیلی ممنون از مطلب زیبا شما
_______________________________
سوال داشتم در مطلب شما
من می خواهش عکس را در قسمت footer عکس را چپ چین کنم باید از چه کدی استفاده کنم
_______________________________
با تشکر از سایت خوب شما
______________________________
راست چین

آیا مفید بود ؟
0
فاطمه سامانی
فاطمه سامانی
01 آذر 1401 08:35

سلام دوست عزیز
می تونید از کد زیر استفاده کنید:

آیا مفید بود ؟