اذهب إلى المحتوى

السؤال

نشر

كيف اقوم بعمل مثل هذا العنصر و توسيطه في منتصف الشاشه انا حاولت عمله عن طريق ال flex و استطعت توسيط الكلمه الكبيره و لكن الكلمه التي في المنتصف لم استطع و ضعها في المنتصف و حاولت و ضعها في ::before

d.png

Recommended Posts

  • 0
نشر

بإمكانك عمل مثل هذا الشكل باستخدام تقنية الـ 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%);
}

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...