چگونه می توان دکمه های گرد محور را در CSS ایجاد کرد؟

ایجاد دکمه های دایره ای که اعداد را از 1 تا 15 نشان می دهد نه تنها یک عنصر منحصر به فرد را به طراحی وب شما اضافه می کند بلکه باعث افزایش تعامل کاربر می شود. این راهنما با استفاده از تنظیمات ساده CSS ، مراحل مربوط به دستیابی به متن کاملاً متمرکز در این دکمه ها را انجام می دهد.

چرا متن در دکمه های دایره ای شما محور نیست؟

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

راه حل گام به گام برای ایجاد دکمه های گرد

بیایید ساختار و سبک های مورد نیاز خود را برای 15 دکمه دایره ای قرار دهیم. در زیر ، ما CSS را اصلاح خواهیم کرد تا اطمینان حاصل شود که شماره ها در داخل دکمه ها متمرکز شده اند ، و همچنین آنها را به طور مرتب در طرح سازماندهی می کنیم.

ساختار HTML

برای شروع ، در اینجا ساختار HTML برای ایجاد دکمه ها وجود دارد:

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

سبک های CSS

در مرحله بعد ، از CSS زیر استفاده کنید تا اطمینان حاصل شود که دکمه ها به صورت دایره ای هستند و متن متمرکز است:

body {
  padding: 1em;
}
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-circle {
  width: 60px; /* Adjust based on your preference */
  height: 60px; /* Same height and width for perfect circle*/
  border-radius: 50%; /* Makes the button circular */
  display: flex;
  align-items: center; /* Vertically centers content */
  justify-content: center; /* Horizontally centers content */
  margin: 10px; /* Adds space between buttons */
  font-size: 24px; /* Adjust font size for visibility */
  color: #fff; /* Font color */
}

توضیح سبک ها

• display: flex; به ما اجازه می دهد تا از Flexbox برای محوریت محتوای دکمه استفاده کنیم.
• border-radius: 50%; با ساختن شعاع مرزی نیمی از ارتفاع و عرض دکمه ، شکل دایره ای را ایجاد می کند.
• align-items: center; وت justify-content: center; اطمینان حاصل کنید که متن داخل دکمه کاملاً به صورت عمودی و افقی متمرکز است.

سوالات متداول

س: آیا می توانم اندازه دکمه ها را تغییر دهم؟
پاسخ: بله ، تنظیم کنید width وت height خواص در .btn-circle کلاس برای ایجاد دکمه های دایره ای با اندازه متفاوت.

س: آیا می توانم برای هر دکمه از رنگ های مختلف استفاده کنم؟
پاسخ: مطمئناً! می توانید کلاس های منحصر به فرد را اضافه کنید یا از سبک های درون خطی برای سفارشی کردن رنگ پس زمینه هر دکمه استفاده کنید.

س: چگونه می توانم دکمه ها را پاسخگو باشم؟
پاسخ: برای پاسخگویی بهتر در دستگاه ها ، از واحدهای نسبی مانند درصد یا عرض/ارتفاع مشاهده استفاده کنید.