"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
أدوات على الانترنت
برنامج تعليمي
التنقل في الموقع
برمجة
الصفحة الأمامية > برمجة > كيفية محاذاة عموديا داخل؟

كيفية محاذاة عموديا داخل؟

تم النشر بتاريخ 2024-11-09
تصفح:339

How to Vertically Align a Inside a ?

محاذاة عموديًا داخل

خذ بعين الاعتبار الموقف التالي: لديك متداخل داخل

div>، كما يظهر في هذا الكود:
& lt;فترة معرف = "tag1_outer" نمط = " الخلفية:#e2e6f0; الحشو الأيمن: 4 بكسل؛ الحشو الأيسر: 4 بكسل؛ الحدود: الصلبة 1px #9daccc؛ الخط: عادي 11 بكسل اريال؛ اللون:#3c3c3c" >as 
<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>
افتراضيًا، سيتم محاذاة إلى الزاوية السفلية اليسرى من
. لتوسيط داخل
عموديًا، خذ في الاعتبار الطرق التالية:

الخيار 1: معالجة ارتفاع الخط

ضبط ارتفاع الخط لـ الطفل يساوي ارتفاع
.

#theMainDiv { الارتفاع: 20 بكسل؛ /* تعيين ارتفاع div كمرجع */ } #tag1_outer { ارتفاع الخط: 20 بكسل؛ 
<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

الخيار 2: تحديد الموضع المطلق

تطبيق الموضع المطلق على حاوية
. بعد ذلك، ضع الطفل في الأعلى تمامًا: 50% واستخدم هامش أعلى:-YYYpx، حيث يمثل YYY نصف الارتفاع المعروف للطفل.

#theMainDiv { الموقف: نسبي؛ /* تطبيق الموضع النسبي على div */ } #tag1_outer { الموقف: مطلق؛ أعلى: 50%؛ الهامش العلوي: -10 بكسل؛ /* نصف ارتفاع الطفل */ 
<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>
راجع المقالة المقدمة حول فهم المحاذاة الرأسية لمزيد من التفاصيل والتقنيات الإضافية.

أحدث البرنامج التعليمي أكثر>
تصنيفأكثر>
تعلم اليابانية تعلم اللغة الكورية تعلم اللغة الصينية تعلم لغة أجنبية لعبة مشكلة شائعة ملحقات التكنولوجيا منظمة العفو الدولية برنامج تعليمي برمجة شرط

دراسة اللغة الصينية

أداةأكثر>
فك تشفير الصورة Base64
بينيين الصينية
ترميز يونيكود
JS ضغط تشفير التشويش
أداة تشفير URL الست عشري
أداة تحويل ترميز UTF-8
أدوات تشفير وفك تشفير Ascii عبر الإنترنت
أداة التشفير MD5
أداة تشفير وفك تشفير النصوص Hash/Hash عبر الإنترنت
تشفير SHA عبر الإنترنت

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3