توسيط العناصر أفقيًا ورأسيًا بإستخدام خصائص 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>

---

 

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

 

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

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

---

 

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

 

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

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

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

---

---

 

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>

---

 

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>

 

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

ولإصلاح ذلك، نضيف ;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>

---

 

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>

---

 

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>