توسيط زر داخل div

في تطوير الويب ، يكون من المستحسن غالبًا مركز زر داخل div. دعونا نستكشف حليتين لهذا التحدي:

باستخدام FlexBox

لتوسيط زر A أفقيًا ورأسيًا داخل DIV:

#Wrapper { العرض: فليكس. محاذاة عناصر: المركز ؛ تبرير المحتوى: المركز ؛ }

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

إذا كان التوضيح الأفقي مطلوبًا فقط ، فيمكن استخدام خاصية المحتوى المبرر:

#wrapper { العرض: فليكس. تبرير المحتوى: المركز ؛ }

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

النهج المستند إلى الهامش الهامش: -20px -50px ؛ / * إزاحة إلى المركز */ الموقف: قريب أعلى: 50 ٪ ؛ اليسار: 50 ٪ ؛ }

للتركيز الأفقي فقط ، يمكن استخدام أحد هذين النهجين:

على الزر

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

text-align: Center ؛ على Div