المحاذاة Alignment

محاذاة النصوص

يمكن محاذاة النص الموجود داخل عناصر مستوى الكتلة block-level elements عن طريق الخاصية text-align .

مثال
تشغيل
  1. h1 {
  2. text-align: center;
  3. }
  4. p {
  5. text-align: left;
  6. }

راجع درس النصوص لمعرفة المزيد حول تنسيق النص.

المحاذاة الرأسية

تتحكم الخاصية vertical-align في المحاذاة الرأسية للصناديق التي تم إنشاؤها بواسطة العناصر المضمنة inline-level element (عادةً نصوص وصور) فيما يتعلق بخط الأساس للنص داخل صندوق عنصر الكتلة block-level ، أو لخلايا الجدول داخل صف.
يوضح المثال التالي كيفية عمل الخاصية vertical-align بشكل عملي.

مثال
تشغيل
  1. img {
  2. vertical-align: middle;
  3. }
  4. span {
  5. vertical-align: super;
  6. }

توسيط العناصر باستخدام الخاصية margin

يعد توسيط عناصر مستوى الكتلة أحد أهم المميزات لإستخدام الخاصية margin في لغة CSS. على سبيل المثال ، يمكن محاذاة العنصر <div> أفقيًا إلى الوسط عن طريق ضبط الهوامش اليمنى واليسرى على auto.

مثال
تشغيل
  1. div {
  2. width: 50%;
  3. margin: 0 auto;
  4. }

في المثال أعلاه قمنا بمحاذاة عنصر <div> أفقيًا.

محاذاة العناصر باستخدام الخاصية position

يمكن الخاصية position جنبًا إلى جنب مع الخصائص left و right و top و bottom لمحاذاة العناصر بالنسبة لإطار عرض المستند أو بالنسبة إلى العنصر الأب.

مثال
تشغيل
  1. .up {
  2. position: absolute;
  3. top: 0;
  4. }
  5. .down {
  6. position: absolute;
  7. bottom: 0;
  8. }

لمعرفة المزيد حول تحديد مواقع العناصر ، راجع درس المواقع.

محاذاة العناصر لليمين ولليسار باستخدام الخاصية float

يمكن استخدام الخاصية float لمحاذاة عنصر إلى يسار أو يمين الكتلة المحتوية الخاصة به بطريقة قد يتدفق المحتوى الآخر على جانبه كما تعلمنا في الدرس السابق.
ومن ثم ، إذا تم تعويم العنصر إلى اليسار ، فسوف يتدفق المحتوى على طول جانبه الأيمن. على العكس من ذلك ، إذا تم تعويم العنصر إلى اليمين ، فسوف يتدفق المحتوى على طول جانبه الأيسر.

مثال
تشغيل
  1. div {
  2. width: 200px;
  3. float: left;
  4. }

أحد الأشياء الأكثر إرباكًا حول العمل مع التخطيطات المستندة إلى العناصر العائمة float-based layouts هو إنطواء العنصر الأب. لا يتمدد العنصر الأب تلقائيًا ليلائم العناصر العائمة. على الرغم من أن هذا ليس واضحًا دائمًا إذا كان العنصر الاب لا يحتوي على أي خلفية أو حدود ملحوظة بصريًا ، ولكن من المهم أن نكون على دراية بذلك ويجب التعامل مع هذه المشكلة لمنع مشكلة التخطيط الغريب عبر المتصفح. انظر الرسم التوضيحي أدناه:

أنطواء العنصر الأب


يمكننا رؤية عنصر <div> لم يمتد تلقائيًا لاستيعاب الصور العائمة. يمكن إصلاح هذه المشكلة بإحدى الطرق التالية :

تعويم العنصر الأب

أسهل طريقة لإصلاح هذه المشكلة هي تعويم العنصر الأب (المحتوي).

مثال
تشغيل
  1. .container {
  2. float: left;
  3. background: lightgray;
  4. }
تحذير:

يعمل هذا الحل في عدد محدود من الحالات ، حيث قد يؤدي تعويم العنصر الأب إلى نتائج غير متوقعة في تخطيط الصفحة.

إستخدام عنصر DIV فارغ

هذه طريقة قديمة ولكنها حل سهل وتعمل عبر كل متصفحات الويب .

مثال
تشغيل
  1. .clearfix {
  2. clear: both;
  3. }
  4. /* HTML Code*/
  5. <div class ="clearfix"> </div>

يمكننا أيضًا القيام بذلك عن طريق الوسم <br>. لكن هذه الطريقة غير موصى بها لأنها تضيف وسم غير ذي معنى إلى كود الصفحة.

إستخدام العنصر الزائف after:

يتم استخدام العنصر :after وهو عنصر زائف pseudo-element بالتزامن مع الخاصية content على نطاق واسع لحل مشكلات تصفية التعويم float-clearing.

مثال
تشغيل
  1. .clearfix:after {
  2. content: ".";
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }

يمكننا تطبيق الفئة .clearfix على أي عنصر يحتوي على عناصر فرعية (ابناء) عائمة.

« التالي السابق »