لحل المشكلة تحتاج إلى تعديل الخصائص المعطاة للـ container ، لاحظ :
.bg .container {
/* قم بإضافة السطر التالي */
transform: translateY(-50%);
/* ********************* */
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
color: white;
}
الانحراف للأعلى الذي تعاني منه، بحدث لأن اعطيت الـ container الخاصية
top: 50%;
وبالتالي سيكون هنالك 50% من طول الشاشة في الأعلى ثم يأتي العنصر container وبالتالي يبدأ العنصر بعد نصف الشاشة.
والخاصية transform التي اعطيناها القيمة translateY(-50%) تقوم بإزاحة العنصر container بقيمة 50% من طوله باتجاه الأعلى بحيث يصبح في المنتصف تماماً.
فكان لدينا العنصر container يبدأ بعد 50% من طول الصفحة فقمنا بسحبه 50% من طوله نحو الأعلى كما في الصورة :
التعليقات