Mohammed Hhhh نشر 25 مايو 2022 أرسل تقرير مشاركة نشر 25 مايو 2022 كيف اقوم بعمل مثل هذا العنصر و توسيطه في منتصف الشاشه انا حاولت عمله عن طريق ال flex و استطعت توسيط الكلمه الكبيره و لكن الكلمه التي في المنتصف لم استطع و ضعها في المنتصف و حاولت و ضعها في ::before اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 25 مايو 2022 أرسل تقرير مشاركة نشر 25 مايو 2022 بإمكانك عمل مثل هذا الشكل باستخدام تقنية الـ Hero Image بإضافة ابن للعنصر الاساسي واعطائه الخصائص : .son{ position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); } وتعديل ال position للأب ليصبح relative .father{ position: relative; } فيصبح الحل لمشكلتك يشبه التلي 1. إذا لم ترد تعدي ملف ال html واستخدمت الـ after .big_scroll { position: relative; font-size: 120px; color: #121420; text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0); } .big_scroll::after { content: "Scroll Now"; display: block; position: absolute; right: 50%; top: 50%; font-size: large; color: white; transform: translate(50%, -50%); } 2. أو بطريقة اخرى <section class="container_scroll"> <h1 class="big_scroll"> Scroll Now <span id="middle_text">Scroll Now</span> </h1> <h1 class="scroll"></h1> </section> .big_scroll { position: relative; font-size: 120px; color: #121420; text-shadow: -1px 0 rgb(0, 0, 0), 0 1px rgb(0, 0, 0), 1px 0 rgb(0, 0, 0), 0 -1px rgb(0, 0, 0); } .middle_text { position: absolute; right: 50%; top: 50%; font-size: large; color: white; transform: translate(50%, -50%); } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mohammed Hhhh
كيف اقوم بعمل مثل هذا العنصر و توسيطه في منتصف الشاشه انا حاولت عمله عن طريق ال flex و استطعت توسيط الكلمه الكبيره و لكن الكلمه التي في المنتصف لم استطع و ضعها في المنتصف و حاولت و ضعها في ::before
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.