المحاذاة الأفقية والعمودية في CSS | أساسيات CSS

 

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


كود محاذاة النص | الخاصية vertical-align 

 استعمال ;margin: auto لتوسيط عنصر (مثل عنصر <div>) لاستخدام هذه الطريقة، يجب تعيين سمة  width للعنصر. خلاف ذلك ;margin: auto لن يؤثر على المحاذاة.

يؤدي ضبط سمة width لعنصر ما إلى منع هذا العنصر من التوسع في كل المساحة المخصصة له.

بعد أن يحتل العنصر عرضًا معينًا، يتم تقسيم المساحة المتبقية بالتساوي بين margin الأيمن والأيسر.


 تتم محاذاة عنصر div باستخدام ؛ margin: auto .

 

.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

كود محاذاة النص | الخاصية text-align 

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

هذا النص موجود في وسط  <div>.

 

.center {
text-align: center;
border: 3px solid green;
}

تحديد مكان الصورة CSS | محاذاة الصور للوسط 

لتوسيط صورة، استخدم أولاً سمة display لتحويل الصورة إلى عنصر block، ثم استخدم ؛ margin: auto :

 


img {
display: block;
margin: auto;
width: 40%;
}

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

تتمثل إحدى طرق محاذاة العناصر في استخدام ;position: absoluteيوضح المثال التالي كيفية استخدام سمة position للمحاذاة: 

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}


تذكر أن العناصر التي تم تعيين سمة position لها على القيمة absolute تكون خارج الموضع الطبيعي على الصفحة ويمكن أن تتداخل مع العناصر الأخرى.

ملاحظة: عند استخدام سمة position للمحاذاة، قم دائمًا بتعيين قيم margin و padding لعنصر <body> . سيؤدي هذا إلى منع أي اختلافات في مظهر الصفحة في المتصفحات المختلفة. 


هناك أيضًا مشكلة في IE8 والإصدارات الأقدم عند استخدام سمة الموضع، وهذا هو أنه إذا كان عنصر مثل <"div class =" container> له سمة width بقيمة معينة وإعلان DOCTYPE! مضمن، يضيف Internet Explorer هامشًا 17 بكسل إلى اليمين. لذلك دائمًا من إشعار DOCTYPE! استخدم في الجزء العلوي من صفحاتك:

 

body {
margin: 0;
padding: 0;
}

.container {
position: relative;
width: 100%;
}

.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}

محاذاة اليسار واليمين باستخدام السمة Float

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


.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}


ملاحظة: عند استخدام float سمة المحاذاة، دوما تعيين قيم margin و padding  لعنصر<body>. يؤدي ذلك إلى تجنب الاختلاف الذي قد يحدث في مظهر الصفحة في المتصفحات المختلفة.

هناك أيضًا مشكلة في IE8 والإصدارات الأقدم عند استخدام سمة float، وذلك إذا كان عنصر مثل <"div class =" container> له سمة width بقيمة معينة وإشعار DOCTYPE! مضمن، يضيف Internet Explorer هامشًا يبلغ 17 بكسل إلى اليمين. لذلك استخدم دائمًا إشعار! DOCTYPE أعلى صفحاتك:


body {
margin: 0;
padding: 0;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}

vertical-align باستخدام padding

هناك عدة طرق لتوسيط عنصر رأسيًا في css. هناك طريقة بسيطة للقيام بذلك وهي استخدام خاصية padding:

استخدم padding عموديًا في المنتصف.

 

.center {
padding: 70px 0;
border: 3px solid green;
}


استخدم padding و text-align: center لتوسيط المحاذاة الرأسية والأفقية:


رأسيًا وأفقيًا.

 

.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

جعل النص في المنتصف باستخدام line-height

هناك طريقة أخرى لتوسيط الخط عموديًا وهي تعيين سمة line-height إلى قيمة تساوي قيمة سمة الارتفاع:

متمركز أفقيًا وعموديًا.

 

center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

vertical-align: middle باستخدام  position و transform

هناك طريقة أخرى لتوسيط العناصر وهي استخدام سمات  position و transform:


متمركز أفقيًا وعموديًا.

 

.center { 
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

 


كلمات مفتاحية: