تخطيط CSS - محاذاة أفقية ورأسية
توسيط العناصر
أفقيًا وعموديًا
توسيط محاذاة العناصر
لتوسيط عنصر كتلة أفقيًا (مثل <div>) ، استخدم margin: auto;
سيؤدي ضبط عرض العنصر إلى منعه من التمدد إلى حواف الحاوية الخاصة به.
سيأخذ العنصر بعد ذلك العرض المحدد ، وسيتم تقسيم المساحة المتبقية بالتساوي بين الهامشين:
يتركز عنصر div هذا.
مثال
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
ملاحظة: لا يكون للمحاذاة إلى الوسط أي تأثير إذا widthلم يتم تعيين الخاصية (أو تم تعيينها على 100٪).
توسيط محاذاة النص
لتوسيط النص داخل عنصر فقط ، استخدم text-align: center;
تم توسيط هذا النص.
مثال
.center {
text-align: center;
border: 3px solid green;
}
نصيحة: لمزيد من الأمثلة حول كيفية محاذاة النص ، راجع فصل نص CSS .
توسيط الصورة
لتوسيط صورة ، اضبط الهامش الأيمن والأيسر autoعلى blockعنصر:
مثال
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
محاذاة لليمين واليسار - استخدام الموضع
تتمثل إحدى طرق محاذاة العناصر في استخدام position: absolute;:
في سنواتي الأصغر والأكثر ضعفًا ، قدم لي والدي بعض النصائح التي كنت أقلبها في ذهني منذ ذلك الحين.
مثال
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
ملاحظة: تتم إزالة العناصر المطلقة ذات المواضع من التدفق العادي ، ويمكن أن تتداخل مع العناصر.
محاذاة لليمين ولليسار - استخدام تعويم
هناك طريقة أخرى لمحاذاة العناصر وهي استخدام floatالخاصية:
مثال
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
هاك clearfix
ملاحظة: إذا كان أحد العناصر أطول من العنصر الذي يحتويه ، وتم تعويمه ، فسيتم تجاوزه خارج الحاوية الخاصة به. يمكنك استخدام "clearfix hack" لإصلاح ذلك (انظر المثال أدناه).
بدون كليرفكس
مع كليرفكس
ثم يمكننا إضافة clearfix hack إلى العنصر المحتوي لإصلاح هذه المشكلة:
مثال
.clearfix::after {
content: "";
clear: both;
display: table;
}
توسيط عموديًا - استخدام الحشو
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.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;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.