2018-10-12 16:35:31 -04:00
|
|
|
---
|
|
|
|
|
title: Vertical Align CSS
|
|
|
|
|
localeTitle: عمودي محاذاة CSS
|
|
|
|
|
---
|
|
|
|
|
## عمودي محاذاة
|
|
|
|
|
|
|
|
|
|
`vertical-align` هي خاصية CSS تستخدم لمحاذاة صورة رأسية.
|
|
|
|
|
|
|
|
|
|
على سبيل المثال ، يمكنك أن تكون `vertical-align` مثل هذه لمحاذاة صورة:
|
|
|
|
|
|
2019-06-20 14:45:11 -07:00
|
|
|
```
|
|
|
|
|
img {
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
}
|
|
|
|
|
```
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
هذه هي القيم الصالحة `vertical-align` :
|
|
|
|
|
|
|
|
|
|
* `baseline` - هذه هي القيمة الافتراضية. تقوم بمحاذاة العنصر إلى الخط الأساسي للعنصر الرئيسي
|
|
|
|
|
* `length` - يؤدي هذا إلى جعل خط الأساس لهذا العنصر عند طول معين أعلى أو أسفل خط الأساس الخاص بالوالدين. يمكنك استخدام البكسلات ، em ،٪ ، إلخ.
|
|
|
|
|
* `sub` - يقوم هذا بمحاذاة العنصر كما لو كان عبارة عن نص العنصر الرئيسي
|
|
|
|
|
* `super` - يقوم هذا بمحاذاة العنصر كما لو كان أعلى عنصر الأصل
|
|
|
|
|
* `top` - يقوم هذا بمحاذاة العنصر بحيث يكون أعلى هذا العنصر متوافقاً مع الجزء العلوي من أطول عنصر في السطر
|
|
|
|
|
* `bottom` - هذا محاذاة العنصر بحيث يتم محاذاة الجزء السفلي من هذا العنصر مع الجزء السفلي من العنصر الأدنى على الخط
|
|
|
|
|
* `middle` - يقوم هذا بمحاذاة العنصر بحيث يكون في وسط العنصر الرئيسي
|
|
|
|
|
* `text=top` - يقوم هذا بمحاذاة الجزء العلوي من هذا العنصر بحيث يتم محاذاة أعلى قمة العنصر الرئيسي
|
|
|
|
|
* `text-bottom` - يؤدي هذا إلى محاذاة الجزء السفلي من هذا العنصر بحيث تتم محاذاته مع الجزء السفلي من نص العنصر الأصلي
|
|
|
|
|
|
|
|
|
|
#### معلومات اكثر:
|
|
|
|
|
|
|
|
|
|
* [CSS العمودية محاذاة](https://www.w3schools.com/cssref/pr_pos_vertical-align.asp)
|
|
|
|
|
|
|
|
|
|
* [CSS-Tricks المحاذاة العمودية](https://css-tricks.com/almanac/properties/t/text-align/)
|
