في CSS، العديد من الخصائص يمكن أن تستخدم لمحاذاة العناصر أفقيا.
مركز محاذاة - استخدام margin
ووضع عرض عنصر على مستوى الكتلة منعه من التمدد إلى حواف من الحاوية الخاصة به. استخدام margin: auto; ، إلى مركز أفقيا عنصر داخل الحاوية الخاصة به.
والعنصر ثم تناول العرض المحدد، وسيتم تقسيم المساحة المتبقية بالتساوي بين هوامش اثنين:
مثال
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} انها محاولة لنفسك » نصيحة: مركز التوفيق ليس له أي تأثير إذا كان width لم يتم تعيين الملكية (أو مجموعة إلى 100٪).
نصيحة: للحصول على محاذاة النص، انظر CSS نص الفصل.
اليسار واليمين محاذاة - استخدام position
طريقة واحدة لمحاذاة العناصر هو استخدام position: absolute; :
مثال
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} انها محاولة لنفسك » ملاحظة: تتم إزالة العناصر المتمركزة المطلقة من التدفق الطبيعي، ويمكن أن تتداخل العناصر.
نصيحة: عند محاذاة العناصر مع position ، وتحديد دائما margin و padding ل <body> العنصر. هذا هو لتجنب الاختلافات البصرية في مختلف المتصفحات.
وهناك أيضا مشكلة مع IE8 وفي وقت سابق، عند استخدام position . إذا كان العنصر الحاوية (في حالتنا <div class="container"> ) لديه عرض محدد، و !DOCTYPE إعلان مفقود، سوف IE8 والإصدارات السابقة إضافة 17px margin على الجانب الأيمن. ويبدو أن هذا المساحة المحجوزة لشريط التمرير. لذلك، دائما تعيين !DOCTYPE التصريح لدى استخدام position :
مثال
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 . إذا كان !DOCTYPE إعلان مفقود، سوف IE8 والإصدارات السابقة إضافة 17px margin على الجانب الأيمن. ويبدو أن هذا المساحة المحجوزة لشريط التمرير. لذلك، دائما تعيين !DOCTYPE التصريح لدى استخدام float :
مثال
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} انها محاولة لنفسك »