الكورس

Advertisements

توسيط العناصر أفقيًا ورأسيًا بإستخدام خصائص CSS


CSS Align – سيعلمك هذا الفصل توسيط العناصر أفقيًا ورأسيًا بإستخدام خصائص CSS، مع بعض الأمثلة التوضيحية.


 

1. كيفية محاذاة العناصر للوسط؟

 

بإستخدام خاصية margin بقيمة auto يمكنك توسيط العناصر الـ block أفقيًا مثل عنصر <div> و <p>، ..إلخ.

 

مثال للتوضيح:

<style>
    .container {
        width: 50%;
        margin: auto;
        border: 2px solid #00f;
        padding: 5px;
    }
</style>

<div class="container">
    <p>This Element is centered!</p>
</div>

This Element is centered!

سيؤدي تحديد عرض العنصر إلى منعه من التمدد إلى حواف الحاوية. سيأخذ العنصر بعد ذلك العرض المحدد ، وسيتم تقسيم المساحة المتبقية بالتساوي بين الهوامش margins.

لا يكون للمحاذاة إلى الوسط تأثير إذا لم يتم تعيين خاصية العرض أو تم ضبطها على 100٪ .


 

2. كيفية محاذاة النص للوسط؟

 

لتوسيط النص داخل عنصر ما ، يمكنك استخدم ;text-align: center، كالتالى:

<style>
    p {
        text-align: center;
        border: 2px solid #00f;
        padding: 5px;
    }
</style>
<p>This Element is centered!</p>

Here Text is centered!


 

3. كيفية توسيط الصورة؟

 

لتوسيط صورة، يجب ضبط الهوامش (margin) اليسرى واليمنى على قيمة auto ووضعها داخل عنصر block، كالتالى:

<style>
    img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 50%;
    }
</style>

<img src="code.png" alt="Image center" />
Image center

Advertisements

 

4. تحديد موضع العنصر بإستخدام خاصية Position

 

يمكنك استخدام خاصية position لتحديد موضع العنصر، كالتالى:

<style>
.container {
  position: relative;
  padding: 20px;
  height: 150px;
  border: 2px solid blue;
}

.container h2 {
  margin: 0;
  position: absolute;
  right: 0;
}
</style>

<div class="container">
    <h2>Right Position</h2>
</div>

Right Position


 

5. محاذاة العنصر بإستخدام خاصية Float

 

هناك طريقة أخرى لمحاذاة العناصر وهي استخدام خاصية الـ float، كالتالى:

<style>
.container {
  padding: 20px;
  height: 150px;
  border: 2px solid blue;
}

.container h2 {
  margin: 0;
  float: right;
}
</style>

<div class="container">
    <h2>Float Right</h2>
</div>

Float Right

إذا كان العنصر أطول من العنصر الذي يحتويه، وكان العنصر float ، فسيتم تجاوزه خارج المحتوى الخاص به! لحل هذه المشكلة يمكنك استخدام الـ clearfix لإصلاح ذلك.

 

فى المثال السابق، لم يحصل اى مشاكل بالرغم من عدم إستخدامى للـ clearfix؛ لأن الـ container أخذ إرتفاع 150px وهذا أكبر من إرتفاع المحتوى الذى بداخلة. لكن فى حالة حذف هذا الإرتفاع مع عدم إستخدام الـ clearfix ستكون النتيجة، كالتالى:

Float Right

ولإصلاح ذلك، نضيف ;overflow: auto إلى العنصر المحتوي لإصلاح هذه المشكلة السابقة، كالتالى:

<style>
.container {
  padding: 20px;
  border: 2px solid blue;
}

.clearfix {
  overflow: auto;
}

.container h2 {
  margin: 0;
  float: right;
}
</style>

<div class="container clearfix">
    <h2>Float Right with Clearfix</h2>
</div>

Float Right with Clearfix


 

6. توسيط العناصر عموديًا باستخدام خاصية line-height

 

يمكنك استخدام خاصية line-height بقيمة تساوي خاصية height لتوسيط العناصر، كالتالى:

<style>
.container {
  padding: 20px;
  border: 2px solid blue;
}

.container h2 {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>

<div class="container">
    <h2>Hello CSS!</h2>
</div>

Hello CSS!


 

7. توسيط العناصر عموديًا باستخدام خاصية Flexbox

 

يمكنك أيضًا استخدام خاصية flexbox لتوسيط العناصر. كالتالى:

<style>
.container {
  padding: 20px;
  border: 2px solid blue;
  height: 100px;
}

.container h2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<div class="container">
    <h2>I'm Center!</h2>
</div>

I’m Center!

لاحظ أن خاصية Flexbox غير مدعومة في IE10 والإصدارات السابقة.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements