محاذاة النصوص css
يمكن محاذاة النص الموجود داخل عناصر مستوى الكتلة block-level elements عن طريق الخاصية text-align .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>محاذاة النصوص</title>
<style>
h1 {
text-align: center;
}
p {
width: 300px;
text-align: justify;
}
</style>
</head>
<body>
<h1>هذا عنوان ... محاذاة النص هنا في المنتصف</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
</body>
</html>
المخرجات
راجع درس تنسيق النصوص css لمعرفة المزيد حول تنسيق النص.
المحاذاة الرأسية css
تتحكم الخاصية vertical-align في المحاذاة الرأسية للصناديق التي تم إنشاؤها بواسطة العناصر المضمنة inline-level element (عادةً نصوص وصور) فيما يتعلق بخط الأساس للنص داخل صندوق عنصر الكتلة block-level ، أو لخلايا الجدول داخل صف.
يوضح المثال التالي كيفية عمل الخاصية vertical-align بشكل عملي.
<!DOCTYPE html>
<html>
<head>
<base href="https://educationfactorys.com/"/>
<meta charset="utf-8">
<title>vertical-align</title>
<style>
body {
font-size:20px;
}
img {
vertical-align: middle;
}
span.sub {
vertical-align: sub;
}
span.super {
vertical-align: super;
}
</style>
</head>
<body>
<p>This is a <img src="examples/images/smiley.png" alt="Smiley"> smiley image.</p>
<p>The chemical formula of water is: H<span class="sub">2</span>O</p>
<p>The equation of mass-energy equivalence is: E=mc<span class="super">2</span></p>
</body>
</html>
المخرجات
توسيط العناصر باستخدام الخاصية margin
يعد توسيط عناصر مستوى الكتلة أحد أهم المميزات لإستخدام الخاصية margin في لغة CSS. على سبيل المثال ، يمكن محاذاة العنصر <div> أفقيًا إلى الوسط عن طريق ضبط الهوامش اليمنى واليسرى على auto.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>توسيط العناصر باستخدام الخاصية margin</title>
<style>
div {
text-align:center;
font-size:26px;
width: 50%;
margin: 0 auto;
padding: 15px;
background: #ffd99b;
}
</style>
</head>
<body>
<div>تمت محاذاة هذا العنصر وسطيا (منتصف) شاشة العرض</div>
</body>
</html>
المخرجات
في المثال أعلاه قمنا بمحاذاة عنصر <div> أفقيًا.
محاذاة العناصر باستخدام الخاصية position
يمكن الخاصية position جنبًا إلى جنب مع الخصائص left و right و top و bottom لمحاذاة العناصر بالنسبة لإطار عرض المستند أو بالنسبة إلى العنصر الأب.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>محاذاة العناصر باستخدام الخاصية positin</title>
<style>
p {
width: 200px;
padding: 10px;
font-size : 26px;
text-align:center;
}
.up {
background: #ee665a;
position: absolute;
top: 0;
}
.down {
background: #b0d878;
position: absolute;
bottom: 100px;
}
</style>
</head>
<body>
<p class="up">يتم وضع هذه الفقرة في الجزء العلوي من إطار العرض لصفحة الويب.</p>
<p class="down">يتم وضع هذه الفقرة على بعد 100 بكسل من الجزء السفلي لإطار عرض صفحة الويب .</p>
</body>
</html>
المخرجات
لمعرفة المزيد حول تحديد مواقع العناصر ، راجع درس موقع العناصر position في css.
محاذاة العناصر لليمين ولليسار باستخدام الخاصية float
يمكن استخدام الخاصية float لمحاذاة عنصر إلى يسار أو يمين الكتلة المحتوية الخاصة به بطريقة قد يتدفق المحتوى الآخر على جانبه كما تعلمنا في الدرس السابق.
ومن ثم ، إذا تم تعويم العنصر إلى اليسار ، فسوف يتدفق المحتوى على طول جانبه الأيمن. على العكس من ذلك ، إذا تم تعويم العنصر إلى اليمين ، فسوف يتدفق المحتوى على طول جانبه الأيسر.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>محاذاة العناصر لليمين ولليسار باستخدام الخاصية float</title>
<style>
div {
width: 200px;
padding: 10px;
font-size:30px;
text-align:center;
}
div.red {
float: left;
background: #ff0000;
}
div.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="red">عائم لليسار</div>
<div class="green">عائم لليمين</div>
</body>
</html>
المخرجات
أحد الأشياء الأكثر إرباكًا حول العمل مع التخطيطات المستندة إلى العناصر العائمة float-based layouts هو إنطواء العنصر الأب. لا يتمدد العنصر الأب تلقائيًا ليلائم العناصر العائمة. على الرغم من أن هذا ليس واضحًا دائمًا إذا كان العنصر الاب لا يحتوي على أي خلفية أو حدود ملحوظة بصريًا ، ولكن من المهم أن نكون على دراية بذلك ويجب التعامل مع هذه المشكلة لمنع مشكلة التخطيط الغريب عبر المتصفح. انظر الرسم التوضيحي أدناه:
يمكننا رؤية عنصر <div> لم يمتد تلقائيًا لاستيعاب الصور العائمة. يمكن إصلاح هذه المشكلة بإحدى الطرق التالية :
تعويم العنصر الأب css
أسهل طريقة لإصلاح هذه المشكلة هي تعويم العنصر الأب (المحتوي).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>تعويم العنصر الأب</title>
<style>
.container{
float: left;
background: yellow;
border: 1px solid #c4884d;
}
p {
width: 200px;
margin: 10px;
padding: 10px;
font-size:30px;
text-align:center;
}
.red {
float: left;
background: #ff0000;
}
.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container">
<p class="red">عائم لليسار</p>
<p class="green">عائم لليمين</p>
</div>
</body>
</html>
المخرجات
يعمل هذا الحل في عدد محدود من الحالات ، حيث قد يؤدي تعويم العنصر الأب إلى نتائج غير متوقعة في تخطيط الصفحة.
إستخدام عنصر DIV فارغ css
هذه طريقة قديمة ولكنها حل سهل وتعمل عبر كل متصفحات الويب .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إستخدام عنصر DIV فارغ</title>
<style>
.container{
background: yellow;
border: 1px solid #c4884d;
}
.clearfix {
clear: both;
visibility: hidden;
height: 0;
}
p {
width: 200px;
margin: 10px;
padding: 10px;
font-size:30px;
text-align:center;
}
.red {
float: left;
background: #ff0000;
}
.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container">
<p class="red">عائم لليسار</p>
<p class="green">عائم لليمين</p>
<div class="clearfix"> </div>
</div>
</body>
</html>
المخرجات
يمكننا أيضًا القيام بذلك عن طريق الوسم <br>. لكن هذه الطريقة غير موصى بها لأنها تضيف وسم غير ذي معنى إلى كود الصفحة.
إستخدام العنصر الزائف after:
يتم استخدام العنصر :after وهو عنصر زائف pseudo-element بالتزامن مع الخاصية content على نطاق واسع لحل مشكلات تصفية التعويم float-clearing.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>إستخدام العنصر الزائف after</title>
<style>
.container{
background:yellow;
border: 1px solid #000000;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.container div {
width: 200px;
margin: 10px;
padding: 10px;
font-size:30px;
text-align:center;
}
div.red {
float: left;
background: #ff0000
}
div.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="red">عائم لليسار</div>
<div class="green">عائم لليمين</div>
</div>
</body>
</html>
المخرجات
يمكننا تطبيق الفئة .clearfix على أي عنصر يحتوي على عناصر فرعية (ابناء) عائمة.