كيفية توسيط الامتداد عموديًا داخل القسم

يمكن أن تكون المحاذاة العمودية محيرة في CSS، ولا تعد محاذاة النطاق داخل div أمرًا محيرًا استثناء.

فهم محاذاة CSS

قبل الغوص في الحلول، من الضروري ضروري لفهم المحاذاة الرأسية في CSS:

• المحاذاة الطبيعية: تتم محاذاة العناصر المضمنة (مثل الامتداد) بشكل طبيعي عند خط الأساس، وهو الجزء السفلي من الحرف الأدنى.
• ارتفاع السطر: تحدد خاصية ارتفاع الخط ارتفاع مربع الخط، الذي يحتوي على كل من الحرف وأي بادئة المساحة.
• الارتفاع الجوهري: الارتفاع الجوهري للعنصر هو المساحة التي يشغلها دون أي تصميم أو حشوة.

تقنيات المحاذاة العمودية

لتوسيط نطاق عموديًا داخل div، خذ في الاعتبار هذه التقنيات:

1. مطابقة ارتفاع الخط مع ارتفاع الحاوية:

اضبط ارتفاع خط الامتداد ليتناسب مع ارتفاع القسم. على سبيل المثال، إذا كان ارتفاع div 15 بكسل، فاضبط line-height: 15px; على المدى.

2. الموضع المطلق:

تعيين الموضع: مطلق؛ على div والموضع: مطلق؛ أعلى: 50%؛ على المدى. ثم قم بضبط قيمة الهامش العلوي للامتداد إلى نصف ارتفاعه الجوهري.

3. التحويل: TranslateY

استخدم التحويل: TranslateY(-50%); الملكية على المدى. يؤدي هذا إلى إزاحة الامتداد عموديًا بمقدار نصف ارتفاعه الجوهري.

4. Flexbox

استخدم Flexbox لتوسيط النطاق عموديًا. ضبط العرض: فليكس؛ محاذاة العناصر: مركز؛ على div والهامش: تلقائي؛ على الامتداد.

نموذج الكود

إليك مثال باستخدام طريقة ارتفاع الخط:

  as