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

مرکز قرار دادن المنت های HTML توسط CSS

فرض کنید می خواهید یک المنت، عنصر یا تگ (HTML Elements) را وسط چین کنید.از چه روشی استفاده می کنید؟ معمولا وسط چین کردن (centralize) المنت های اچ تی ام ال برای خیلی از طراحان وب سایت کار ساده ای نیست و طراحان وب سایت ها از اینکه از چه روشی استفاده کنند سردرگم می شوند. من سعی می کنم تمام روش های معمول و استانداردی که برای وسط چین کردن استفاده می شود را همراه با مثال توضیح دهم. برای اینکه بهتر متوجه فرایند کار شوید پیشنهاد می کنم مثال هایی که زده شده است را خودتون تست کنید تست کنید تا درک کاملی از روند کار داشته باشید.
مطالبی که در این پست ارائه می شود از css-tricks اقتباس شده است. البته تغییراتی در آن دادم که برای زبان های راست به چپ مثل فارسی و کاربران فارسی زبان مفید واقع شود.
خوب بهتره که شروع کنیم.

وسط چین کردن به صورت افقی
  • وسط چین کردن عناصر با خاصیت inline, inline-block, inline-table, inline-flex و … .

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

See the Pen centralize Horizontally by text-align by Saeed (@saeedpnh) on CodePen.

  • وسط چین کردن با استفاده از margin.

مقدار چپ و راست margin را در وضعیت auto قرار می دهیم. در این حالت باید حتما به عنصر مقدار width داده شود. (مقدار display باید block یا مشابه آن باشد)

See the Pen centralize Horizontally by margin by Saeed (@saeedpnh) on CodePen.

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

  • وسط چین کردن یک عنصر از نوع inline مثل متن یا لینک

فرض کنیم میخواهیم متن درون یک div را به صورت عمودی وسط چین کنیم. یعنی متن دقیقا در وسط div قرار بگیرد. در اینجا به سادگی می توانیم padding بالا و پایین عنصر بیرونی را یک عدد ثابت بدهیم.


      <div>
        <h3>وسط چین شده به صورت عمودی</h3>
      </div>
    

div{
  background: tomato;
  padding:50px;
}

اگر به هر دلیلی نمی توانیم از padding استفاده کنیم و میخواهیم ارتفاع عنصر درونی مان را با استفاده از div تعیین کنیم. فقط کافیست که مقدار line-height را برابر با مقدار height قرار دهیم.


      <div>
        <h3> وسط چین شده به صورت عمودی با تنظیم ارتفاع </h3>
      </div>
    

div{
  background: tomato;
  height: 250px;
  line-height: 250px;
}
  • وسط چین کردن عمودی با استفاده از vertical-align

با استفاده از vertical-align می توانیم یک متن را درون یک div به صورت عمودی وسط چین کنیم. برای این کار باید ویژگی table-cell به عنصر بیرونی بدهیم.


      <div>
        <h3> vertical-align وسط چین شده به صورت عمودی توسط </h3>
      </div>
    

div{
  height: 250px;
  background: tomato;
  display: table-cell;
  vertical-align: middle;
}

همین کار با استفاده از flex. استفاده از flex یک روش بسیار راحت و جدیدتر محسوب می شود. برای این کار خاصیت عنصر درونی را از نوع flex قرار می دهیم و سپس طبق نمونه دو خاصیت flex-direction و justify-content را تنظیم می کنیم.


      <div>
        <h3> Flex وسط چین شده به صورت عمودی توسط </h3>
      </div>
    

div{
  height: 250px;
  background: tomato;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

 

 

در حال تکمیل …

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

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

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

احتمالا از اینها هم خوشتون بیاد

آموزش css3

آموزش دستورات خاص و کاربردی در CSS3

در این مقاله تعدادی از دستورات جالب و کاربردی در CSS3 را بررسی می کنیم. دستوراتی که کمتر در مورد آن ها صحبت می شود اما دانستن آنها مهم و در طراحی کمک بزرگی به ما می کند. خوب پس در ادامه با من همراه باشید.

کارگاه آموزشی طراحی وب

کارگاه آموزشی طراحی و توسعه وب سایت به صورت پروژه محور و کارگاهی

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.