نقل التصميم الى الوسط

Bilal Al Bwidani · 9 يناير 2022

مرحبا أصدقائي

لدي سؤالين متشابهين حول كيفية نقل التصميم بكامله الى نصف الصفحة او نحو ذلك

وكيفية نقل الLog In الى وسط التصميم

وسأكون لكم شاكراً وممتناً اذا كان لكم تعليق على التصميم بكامله وبشكل عام

حتى أحسن من قدراتي وأطورها, علماً أنني قد انقطعت فترةً طويلةً عن البرمجة وقد رجعت بهذا المستوى الذي ترونه

شكراً لكم

Mohamed Abu Abdo · 10 يناير 2022

اضف المحازاة الي المنتصف من خلال كتابة السطر التالي

align-items: center;

في ال class الذي تستخدمه وذلك بداخل css الخاص بمشروعك

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;  
}

أو قم بإضافته مباشرة إلي div الرئيسية, أو اضفها الي body ,هكذا

<div style="align-items: center;"> .... </div>

بعض الخيارات الاخري متاحة ولكن ان لم تعرف كيف تكتب ,يمكنك عرض جزء من الكود وسنعيد صياغته,موفق

Salah Eddin Beriani2 · 10 يناير 2022

بافتراض تصميمك كالتالي فيمكنك استعمال flexbox في كلتا الحالتين على النحو التالي

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .login {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .logo {
      display: flex;
      justify-content: center;
    }
  </style>
  <body>
    <div class="login">
      <div class="logo">
        <h1>logo</h1>
      </div>
      <form action="">...</form>
    </div>
  </body>
</html>

بلال زيادة · 10 يناير 2022

أو يمكنك إنشاء عنصر حاوي للعناصر ( container ) بحيث يتم توسيط هذا العنصر في منتصف الصفحة باستخدام الخواص width, margin

<div class="container">
	// هنا العناصر الخاصة بك
</div>

والأن نطبق التنسيق لجعله في المنتصف

.container{
	width: 500px; 
	margin: 0 auto
}

نقل التصميم الى الوسط

السؤال

Bilal Al Bwidani

مرحبا أصدقائي

3 أجوبة على هذا السؤال

Recommended Posts

Mohamed Abu Abdo

Salah Eddin Beriani2

بلال زيادة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية