نص مركز HTML - كيفية محاذاة CSS الرأسية لملف Div

في عالم HTML و CSS ، يتعلق الأمر كله ببنية التخطيط وتوزيع العناصر. عادةً ما نستخدم HTML لتحديد الترميز والهيكل ، بينما تساعدنا CSS في التعامل مع التصميم ومحاذاة العناصر.

في هذا المنشور ، سوف نتعلم قليلاً عن الطرق المختلفة التي يمكننا من خلالها توسيط عناصر HTML والتعامل مع المحاذاة الرأسية مع CSS.

أولاً سنتعلم كيفية محاذاة النص مع CSS.

بعد ذلك ، سنغطي كيفية محاذاة div وأي عناصر أخرى.

وأخيرًا سوف نتعلم كيف يمكننا وضع نص و divمعًا داخل حاوية.

كيفية توسيط النص

هناك العديد من الطرق لتوسيط النص باستخدام CSS.

استخدام خاصية Float

يعد Float طريقة سهلة لمحاذاة النص.

لوضع النص على الجانب الأيمن من التخطيط ، يمكننا ببساطة استخدامه right  كقيمة لـ float.

لوضع النص على الجانب الأيسر ، نستخدم left، مثل float:left. انظر للمثال ادناه:

 .right { float: right; } .left { float: left; } // HTML Right Left

لتوسيط النص باستخدام عائم يمكننا استخدامه margin-leftأو margin-rightصنعه   50%، كما هو موضح أدناه.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

يمكنك معرفة المزيد عن استخدامات Floatهنا.

استخدام محاذاة النص

text-alignهي طريقة أكثر ملاءمة وأكثر تحديدًا لمحاذاة النص. يسمح لنا بوضع النص في centerأو إلى الجانب leftأو rightالجانب ، كما يوضح المثال التالي:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 

Right

Center

Left

تعلم المزيد عن text-align.

كيفية محاذاة ملف div

حسنًا ، هناك العديد من الطرق للقيام بذلك.

بنفس الطريقة التي نستخدمها Floatلمحاذاة النص ، يمكننا استخدامه لمحاذاة divعنصر أيضًا.

Floatيقوم بالمهمة ، لكن CSS تمنحنا خيارات أفضل تكون أكثر ملاءمة وأناقة. هل سمعت عن Flexbox؟ أو شبكة المغلق؟

حسنًا ، توفر هاتان الطريقتان طرقًا حديثة جدًا لمحاذاة التخطيط الخاص بك في CSS والعمل معه. دعونا نلقي نظرة على Flexbox بمزيد من التفصيل.

فليكس بوكس  

يوفر Flexbox طريقة سهلة ومباشرة لمحاذاة div- وهي الطريقة المفضلة لدي حتى الآن للتعامل مع التخطيطات في CSS (أستخدمها كل يوم).

لنلقِ نظرة على ما سنفعله Flexboxلنرى كيف يعمل عن طريق إعادة إنشاء نفس المثال أعلاه.

المثال:

الرمز:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div 

دعونا نكسرها

  • نحن دائما نحدد div  الوالد الذي يستخدم display:flexللتقديم Flexbox. لذلك نجعل كل أطفال div داخل الوالدين divقادرين على التعامل معهم باستخدام Flexboxالخصائص.
  • و   flex-directionيستخدم rowالاتجاه افتراضيا، مما يعني سيتم وضع العناصر عموديا داخل الحاوية.
  • باستخدام justify-contentالخاصية ، يمكننا محاذاة divأطفال a في اتجاهات مختلفة مثل المثال التالي:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  يضع العناصر في وسط الحاوية.
  • justify-content:flex-start يضع العناصر في بداية الحاوية على اليسار.
  • justify-content:flex-end يضع العناصر في نهاية الحاوية على الجانب الأيمن.
  • justify-content:space-around تجعل العناصر مناسبة للحاوية وتضع فجوة متساوية بين جميع العناصر.
  • justify-content:space-evenly يوزع العناصر داخل الحاوية الرئيسية بالتساوي مع نفس المساحة ونفس العرض.

ينطبق المثال أعلاه على جميع العناصر الفرعية كمجموعة.

تخيل لو أردنا محاذاة واحدة divداخل الحاوية. يمكننا دائمًا استخدام align-selfمحاذاة عنصر واحد.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

يمكننا تطبيق نفس الشيء على النص باستخدام Flexboxكما في المثال التالي:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div 

هذه تغريدة رائعة كتبها جوليا إيفانز توضح التركيز على CSS بشكل عام:

يتم إحتوائه

هناك العديد من الطرق لتوسيط العناصر في CSS. وستتعلم دائمًا أشياء جديدة بمرور الوقت بينما تتدرب أكثر فأكثر.

لذلك أوصي بأن تعمل من خلال بعض الأمثلة مما تعلمته اليوم حتى تظل ثابتة.

  • يجب أن تتابعني على تويتر؟
  • تحقق من My Github
  • قم بزيارة مدونتي