أمر محاذاة المركز في HTML المحاذاة باستخدام "محاذاة النص: المركز"

ما هو DIV

يأتي اسم العنصر من الكلمة الإنجليزية Division، والتي تعني القسمة. عند كتابة العلامات، يتم استخدامها لتقسيم العناصر إلى كتل. تحتوي عناصر DIV على مجموعات من المحتوى على صفحة ويب. على سبيل المثال، الصور والفقرات مع النص. لا تؤثر العلامة على عرض المحتوى بأي شكل من الأشكال ولا تحمل أي حمل دلالي.

DIV يدعم كافة السمات العالمية. ولكن لتصميم الويب تحتاج فقط إلى فئتين ومعرف. لن تتذكر أي شخص آخر إلا في الحالات الغريبة، وهذه ليست حقيقة. تم إهمال سمة المحاذاة، التي كانت تُستخدم لمحاذاة أقسام div للوسط أو لليسار.

متى يتم استخدام DIVs

تخيل أن الموقع عبارة عن ثلاجة، وأن وحدات DIV عبارة عن حاويات بلاستيكية تحتاج إلى فرز المحتويات فيها. لن تضع الفاكهة في نفس الحاوية التي تحتوي على نبتة الكبد. سوف تضع كل نوع من المنتجات على حدة. يتم إنشاء محتوى الويب بطريقة مماثلة.

افتح أي موقع ويب وقم بتقسيمه إلى كتل ذات معنى. الرأس في الأعلى، والتذييل في الأسفل، والنص الرئيسي في المنتصف. يوجد عادةً على الجانب عمود أصغر يحتوي على محتوى إعلاني أو سحابة علامات.

انظر الآن إلى كل قسم بمزيد من التفاصيل. ابدأ بالرأس. يحتوي رأس الموقع على شعار منفصل وملاحة وعنوان من المستوى الأول وأحيانًا شعار. قم بتعيين كل كتلة دلالية حاوية خاصة بها. لن يؤدي هذا إلى فصل العناصر الموجودة في التدفق فحسب، بل سيجعل تنسيقها أسهل أيضًا. ستجد أنه من الأسهل توسيط كائن ما في علامة DIV عن طريق إعطائه فئة أو معرفًا.

توسيط DIVs باستخدام الهوامش

عند معالجة عناصر الويب، يأخذ المتصفح في الاعتبار ثلاث خصائص: الحشو والهامش والحدود. الحشو هو المسافة بين المحتوى وحدوده. الهامش - الحقول التي تفصل كائنًا عن الآخر. الحدود هي الخطوط على طول الكتل. ويمكن تخصيصها لهم جميعًا مرة واحدة أو لجانب واحد فقط:

تضيف هذه الخصائص مسافة بين الكائنات وتساعدك على محاذاتها ووضعها بشكل صحيح. على سبيل المثال، إذا كانت هناك حاجة إلى نقل كتلة بها صورة من الحافة اليسرى إلى المركز بنسبة 20%، فيمكنك تعيين هامش يسار للعنصر بقيمة 20%:

كتلة مع img (الهامش الأيسر: 20%؛)

يمكن أيضًا تنسيق العناصر باستخدام قيم العرض والحشو السلبي. على سبيل المثال، هناك كتلة بأبعاد 200 بكسل في 200 بكسل. أولاً، دعونا نعينه موضعًا مطلقًا وننقله إلى المركز بنسبة 50%.

القسم (الموضع: مطلق؛ اليسار: 50%؛)

الآن، للتأكد من وضع DIV المركزي بشكل مثالي، نعطيه هامشًا سلبيًا إلى اليسار يساوي 50٪ من عرضه، أي -100 بكسل:

الهامش الأيسر: -100 بكسل؛

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

لذا، عندما تحتاج إلى توسيط DIV، استخدم خاصية تغيير حجم المربع مع القيمة border-box. سيؤدي هذا إلى منع المتصفح من إضافة قيم الحشو والحدود إلى العرض الإجمالي لعنصر DIV. لرفع عنصر أو خفضه، استخدم أيضًا القيم السالبة. ولكن في هذه الحالة، يمكن تعيينها إما للحقل العلوي أو السفلي للحاوية.

كيفية توسيط كتلة DIV باستخدام الهوامش التلقائية

هذه طريقة سهلة لتوسيط الكتل الكبيرة. يمكنك ببساطة تعيين عرض الحاوية وخاصية الهامش إلى تلقائي. سيضع المتصفح كتلة في المنتصف بهوامش متساوية على اليسار واليمين، ليقوم بكل العمل بنفسه. ونتيجة لذلك، فإنك لا تخاطر بالارتباك في الحسابات الرياضية وتوفر وقتك بشكل كبير.

استخدم طريقة الحقل التلقائي عند تطوير التطبيقات سريعة الاستجابة. الشيء الرئيسي هو تعيين قيمة العرض للحاوية في em أو النسبة المئوية. سيعمل الرمز الموجود في المثال أعلاه على توسيط DIV وعلى أي جهاز، بما في ذلك الهواتف المحمولة، سيشغل 90% من الشاشة.

المحاذاة عبر خاصية العرض: inline-block

بشكل افتراضي، تعتبر عناصر DIV عناصر كتلة، وقيمة العرض الخاصة بها هي كتلة. لهذه الطريقة سوف تحتاج إلى تجاوز هذه الخاصية. مناسب فقط لـ DIVs التي تحتوي على حاوية أصل:

يتم تعيين خاصية محاذاة النص للعنصر الذي ينتمي إلى فئة div الخارجية بقيمة center، والتي تعمل على توسيط النص بالداخل. لكن في الوقت الحالي، يرى المتصفح عنصر DIV المتداخل ككائن كتلة. لكي تعمل خاصية محاذاة النص، يجب التعامل مع القسم الداخلي على أنه أحرف صغيرة. لذا، في جدول CSS الخاص بمحدد القسم الداخلي، تكتب الكود التالي:

القسم الداخلي (العرض: كتلة مضمنة؛)

يمكنك تغيير خاصية العرض من كتلة إلى كتلة مضمنة.

طريقة التحويل/الترجمة

تتيح أوراق الأنماط المتتالية إمكانية نقل عناصر الويب وتحريفها وتدويرها وتحويلها حسب الرغبة. يتم استخدام خاصية التحويل لهذا الغرض. تشير القيم إلى نوع التحويل المطلوب ودرجته. في هذا المثال سوف نعمل مع ترجمة:

تقوم وظيفة الترجمة بنقل العنصر من موضعه الحالي إلى اليسار/اليمين وإلى أعلى/أسفل. يتم تمرير قيمتين بين قوسين:

• درجة الحركة الأفقية
• درجة الحركة العمودية.

إذا كان هناك حاجة إلى نقل عنصر على طول أحد محاور الإحداثيات فقط، فبعد الكلمة ترجمة، تشير إلى اسم المحور وبين قوسين مقدار الإزاحة المطلوبة:

التحويل: ترجمة Y(-20%);

في بعض الأدلة يمكنك العثور على التحويل باستخدام بادئات البائع:

تحويل Webkit: ترجمة (50%، 50%)؛ -ms-transform: ترجمة(50%, 50%)); تحويل: ترجمة (50%، 50%)؛

وفي عام 2018، لم يعد هذا ضروريًا؛ فالخاصية مدعومة من قبل جميع المتصفحات، بما في ذلك Edge وIE.

من أجل توسيط DIV الذي نريده، تتم كتابة وظيفة ترجمة CSS بقيمة 50% للمحور الرأسي والأفقي. سيؤدي هذا إلى قيام المتصفح بإزاحة العنصر من موضعه الحالي بمقدار نصف عرضه وارتفاعه. يجب تحديد خصائص العرض والارتفاع:

ضع في اعتبارك أن العنصر الذي يتم تطبيق خاصية التحويل عليه يتحرك بشكل مستقل عن الكائنات المحيطة به. من ناحية، يعد هذا أمرًا مريحًا، ولكن في بعض الأحيان عند نقله، يمكن أن يتداخل DIV مع حاوية أخرى. ولذلك، تعتبر هذه الطريقة لتوسيط مكونات الويب غير قياسية وتستخدم فقط في حالات الضرورة القصوى. يتم استخدام التحويلات وفقًا لجميع شرائع CSS للرسوم المتحركة.

العمل مع تخطيط Flexbox

يعتبر Flexbox وسيلة متطورة لتصميم تخطيطات الويب. ولكن إذا أتقنتها، فسوف تدرك أنها أبسط بكثير وأكثر متعة من طرق التنسيق القياسية. تعد مواصفات Flexbox طريقة مرنة وقوية بشكل لا يصدق للتعامل مع العناصر. تمت ترجمة اسم الوحدة من الإنجليزية إلى "حاوية مرنة". يتم ضبط قيم العرض والارتفاع وترتيب العناصر تلقائيًا، دون حساب المسافات البادئة والهوامش.

في الأمثلة السابقة، تعاملنا بالفعل مع خاصية العرض، لكننا قمنا بتعيينها على قيم الحظر والكتلة المضمنة. لإنشاء تخطيطات مرنة سوف نستخدم العرض: flex. نحتاج أولاً إلى حاوية مرنة:

لتحويلها إلى حاوية مرنة في الجداول المتتالية، نكتب:

حاوية مرنة (العرض: فليكس؛)

جميع الكائنات المتداخلة، باستثناء العناصر التابعة لها فقط، ستكون عناصر مرنة:

إذا قمت بوضع قائمة داخل حاوية مرنة، فإن عناصر قائمة li لا تعتبر عناصر مرنة. لن يعمل تخطيط Flexbox إلا على ul:

قواعد لوضع العناصر المرنة

لإدارة العناصر المرنة، تحتاج إلى ضبط المحتوى ومحاذاة العناصر. اعتمادًا على القيم التي تحددها، تقوم هاتان الخاصيتان بوضع الكائنات تلقائيًا حسب الحاجة. إذا كنا بحاجة إلى توسيط كافة عناصر DIV المتداخلة، فإننا نكتب justify-content: center وalign-items: center ولا شيء آخر. سيقوم المتصفح ببقية العمل بنفسه:

لتوسيط النص على DIVs التي تعتبر عناصر مرنة، يمكنك استخدام تقنية محاذاة النص القياسية. أو يمكنك جعل كل DIV متداخل أيضًا عبارة عن حاوية مرنة وإدارة المحتوى باستخدام ضبط المحتوى. تكون هذه الطريقة أكثر عقلانية إذا كانت تحتوي على مجموعة متنوعة من المحتوى، بما في ذلك الرسومات والكائنات المتداخلة الأخرى، بما في ذلك القوائم متعددة المستويات.

اليوم عزيزي القارئ سوف نتعامل مع مشكلة المحاذاة الرأسية في الكتلة شعبة.

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

صياغة المشكلة:تحتاج إلى توسيط محتويات كتلة متغيرة الارتفاع بالنسبة إلى الوضع الرأسي.

الآن لنبدأ في حل المشكلة.

وهكذا، لدينا كتلة، يمكن أن يتغير ارتفاعها:

أول ما يتبادر إلى ذهنك هو القيام بالخدعة التالية:

هناك كل الأسباب للاعتقاد بأن هذه العبارة حظر المحتوىسيتم محاذاته مع الارتفاع المركزي لحاوية div.

لكنه لم يكن هناك! لن نحقق أي محاذاة مركزية متوقعة بهذه الطريقة. و لماذا؟ يبدو أن كل شيء موضح بشكل صحيح. وتبين أن هذه هي المشكلة: الملكية محاذاة عموديةيمكن استخدامه فقط لمحاذاة محتويات خلايا الجدول أو لمحاذاة العناصر المضمنة بالنسبة لبعضها البعض.

فيما يتعلق بالمحاذاة داخل خلية الجدول، أعتقد أن كل شيء واضح. لكنني سأشرح حالة أخرى مع العناصر المضمنة.

المحاذاة العمودية للعناصر المضمنة

لنفترض أن لديك سطرًا من النص مقسمًا بواسطة علامات الأسطر إلى أجزاء:

أنت يرحب قطعةنص!

العلامة المضمنة هي حاوية لا يؤدي مظهرها إلى التفاف المحتوى في سطر جديد.

يؤدي إجراء علامة الكتلة إلى التفاف محتويات الحاوية في سطر جديد.

هي علامة كتلة. إذا أرفقنا أجزاء من النص في كتل

, ثم سيكون كل واحد منهم على سطر جديد. باستخدام العلامة ، وهو على خلاف

، بأحرف صغيرة، لن يتم نقل الحاويات إلى سطر جديد، جميع الحاويات سيبقى على سطر واحد.

حاوية سهل الاستخدام عند تحديد جزء من النص بتنسيق خاص (تمييزه بلون أو خط مختلف وما إلى ذلك)

للحاويات قم بتطبيق خصائص CSS التالية:

#perviy( محاذاة عمودية:sub; ) #vtoroy( محاذاة عمودية:3px; ) #tretiy( محاذاة عمودية:-3px; )

سيبدو سطر النص الناتج كما يلي:

هذا ليس أكثر من محاذاة رأسية للعناصر المضمنة وخاصية CSS محاذاة عموديةتتواءم مع هذه المهمة على أكمل وجه.

لقد تشتت انتباهنا قليلاً، والآن نعود إلى مهمتنا الرئيسية.

المحاذاة العمودية في حاوية div

بغض النظر عن الأمر، سنستخدم الخاصية للمحاذاة داخل حاوية div محاذاة عمودية. كما قلت سابقًا، يمكن استخدام هذه الخاصية في حالة محاذاة العناصر المضمنة (ناقشنا هذه الحالة بالتفصيل أعلاه وهي غير مناسبة لنا للمحاذاة في حاوية div)؛ كل ما تبقى هو استخدام حقيقة ذلك محاذاة عموديةيعمل لخلايا الجدول.

كيف يمكننا استخدام هذا؟ ليس لدينا طاولة، بل نعمل باستخدام حاوية div.

ها، اتضح أن الأمر بسيط للغاية.

خاصية CSS عرضيسمح لك بتحويل كتلة div الخاصة بنا إلى خلية جدول، ويمكن القيام بذلك بسهولة وبشكل طبيعي:

لنفترض أن لدينا فئة div محاذاة النص:

بالنسبة لهذه الكتلة، نحدد خاصية CSS التالية:

محاذاة النص (العرض: خلية الجدول؛)

ستعمل تعليمات CSS هذه على تحويل div الخاص بنا بأعجوبة إلى خلية جدول دون تغييرها بصريًا بأي شكل من الأشكال. وبالنسبة لخلية الجدول يمكننا تطبيق الخاصية محاذاة عموديةبالكامل وستعمل المحاذاة الرأسية المطلوبة.

ومع ذلك، لا يمكن أن ينتهي كل شيء بهذه البساطة. لدينا متصفح IE رائع. إنه لا يعرف كيفية العمل مع الممتلكات العرض: خلية الجدول(أقترح عليك قراءة الجدول الذي يوضح وظيفة خاصية CSS هذه في متصفحات مختلفة على موقع الويب htmlbook.ru). لذلك، سيتعين علينا اللجوء إلى الحيل المختلفة.

هناك العديد من الطرق لتحقيق المحاذاة في حاوية div لجميع المتصفحات:

• الطريقة باستخدام حاوية div مساعدة إضافية
• طريقة استخدام التعبير. إنه مرتبط بحساب صعب لارتفاعات الكتلة. لا يمكنك القيام بذلك دون معرفة جافا سكريبت.
• باستخدام خاصية ارتفاع الخط. هذه الطريقة مناسبة فقط للمحاذاة الرأسية في كتلة ذات ارتفاع معروف، وبالتالي لا تنطبق في الحالة العامة.
• استخدام إزاحة المحتوى المطلق والنسبي في حالة متصفح IE. يبدو لي أن هذه الطريقة هي الأكثر مفهومة وبساطة. بالإضافة إلى ذلك، يمكن تنفيذه لحاوية div متغيرة الارتفاع. سنتناولها بمزيد من التفصيل.

كما تفهم، علينا فقط حل مشكلة المحاذاة الرأسية في IE المرتبطة بسوء فهمها للخاصية العرض: خلية الجدول(لا IE6 ولا IE7 ولا IE8ليس على دراية بهذه الخاصية). لذلك، باستخدام تعليق مشروطسنحدد خصائص CSS مختلفة خصيصًا لمتصفحات IE.

تعليق مشروط

نوع البناء:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

يسمى تعليقًا شرطيًا (كن حذرًا، يجب أن يتوافق نوع التعليق الشرطي تمامًا مع المثال الموضح، حتى مسافة).

لن يتم تنفيذ التعليمات الواردة في هذا التعليق الشرطي إلا إذا كان المتصفح الذي يفسر هذا الرمز ينتمي إلى عائلة IE.

وبالتالي، باستخدام التعليق الشرطي، يمكننا إخفاء جزء من التعليمات البرمجية من جميع المتصفحات باستثناء IE.

حل المشكلة

بسبب كل هذا البقدونس، سنحتاج إلى تزويد كود HTML الخاص بنا بحاويتين إضافيتين. هذا هو الشكل الذي ستبدو عليه كتلة النص الخاصة بنا:

لحاوية فئة div محاذاة النصيتم تعيين خصائص CSS التي تجعل محتواها عموديًا لجميع المتصفحات العادية (باستثناء IE بالطبع):

العرض: خلية الجدول؛ محاذاة عمودية: وسط؛

وخاصيتان أخريان تحددان العرض والارتفاع للكتلة:

العرض: 500 بكسل؛ الارتفاع: 500 بكسل؛

وهذا يكفي لمحاذاة محتويات الحاوية في المنتصف بالنسبة إلى الوضع الرأسي في جميع المتصفحات باستثناء آي إي.

الآن نبدأ بإضافة الخصائص المتعلقة بالمحاذاة لمتصفحات عائلة IE(لقد استخدمنا لهم كتلًا إضافية شعبةو فترة):

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

قسم محاذاة النص (الموضع: مطلق؛ الأعلى: 50%؛)

يعني هذا التصميم: لجميع علامات div داخل كتلة ذات فئة محاذاة النصتطبيق الخصائص المذكورة.

وفقا لذلك، الأنماط المحددة للكتلة محاذاة النصتم تعديلها:

محاذاة النص (العرض: خلية جدول؛ محاذاة رأسية: وسط؛ العرض: 500 بكسل؛ الارتفاع: 500 بكسل؛ الموضع: نسبي؛)

الآن تم نقل النقطة العلوية اليسرى من كتلة النص إلى الأسفل بنسبة 50%.

ولتوضيح ما يحدث قمت برسم رسم توضيحي:

وكما ترون من الصورة، فقد أحرزنا بعض التقدم. ولكن هذا ليس كل شيء! لقد تحركت النقطة العلوية اليسرى من الكتلة الصفراء بالفعل بنسبة 50٪ إلى الأسفل، مقارنة بالكتلة الأصلية (الأرجوانية). لكننا نريد أن يكون ارتفاعه 50 بالمائة من ارتفاع الكتلة الأرجوانية. مركز الكتلة الصفراء، وليس أعلى نقطة على اليسار.

الآن سوف تدخل العلامة حيز التنفيذ فترةوموقعها النسبي:

نطاق محاذاة النص (الموضع: نسبي؛ الأعلى: -50%؛)

وهكذا نكون قد قمنا بإزاحة الكتلة الصفراء للأعلى بمقدار 50% من ارتفاعها، بالنسبة إلى موضعها الأولي. كما تفهم، فإن ارتفاع الكتلة الصفراء يساوي ارتفاع المحتوى المركزي. والعملية الأخيرة على حاوية الامتداد وضعت المحتوى الخاص بنا في منتصف الكتلة الأرجوانية. مرحا!

دعونا نلعب الحيل قليلا

أولا وقبل كل شيء، نحن بحاجة إلى إخفاء البقدونس من جميع المتصفحات العادية وفتحه لـ IE. يمكن القيام بذلك، بالطبع، باستخدام تعليق مشروط، وليس من قبيل الصدفة أننا تعرفنا عليه:

هناك مشكلة صغيرة.إذا كان المحتوى المركزي مرتفعا جدا، فهذا يؤدي إلى عواقب غير سارة: هناك ارتفاع إضافي للتمرير العمودي.

حل للمشكلة:بحاجة إلى إضافة خاصية إخفاء الفائضحاجز محاذاة النص.

تعرف على العقار بالتفصيل تجاوزممكن في .

تعليمات CSS النهائية للكتلة محاذاة النصلديه النموذج:

محاذاة النص (العرض: خلية جدول؛ محاذاة رأسية: وسط؛ العرض: 500 بكسل؛ الارتفاع: 500 بكسل؛ الموضع: نسبي؛ التجاوز: مخفي؛ الحد: 1 بكسل أسود خالص؛)

أنا آسف، نسيت أن أذكر نقطة مهمة. إن جربت اضبط ارتفاع كتلة الفصل محاذاة النصكنسبة مئوية، إذن لديك لن ينجح شيء.

توسيط في كتلة الارتفاع المتغير

في كثير من الأحيان تكون هناك حاجة لتعيين ارتفاع كتلة الفصل محاذاة النصليس بالبكسل، ولكن كنسبة مئوية من ارتفاع الكتلة الأصلية، وقم بمحاذاة محتويات حاوية div في المنتصف.

المهم هو أنه من المستحيل القيام بذلك لخلية جدول (لكن كتلة الفصل محاذاة النصيتحول بالضبط إلى خلية جدول، وذلك بفضل الخاصية العرض: خلية الجدول).

في هذه الحالة، يجب عليك استخدام كتلة خارجية تم تحديد خاصية CSS لها جدول العرضوقمت بالفعل بتعيين القيمة المئوية للارتفاع لها. ثم يتم تضمين الكتلة فيه بتوجيه CSS العرض: خلية الجدول، سوف يرث بسعادة ارتفاع الكتلة الأصلية.

من أجل تنفيذ كتلة متغيرة الارتفاع في مثالنا، سنقوم بتعديل CSS قليلاً:

الى الصف محاذاة النصسوف نقوم بتغيير قيمة العقار عرضمع خلية الجدولعلى طاولةوإزالة توجيه المحاذاة محاذاة عمودية: وسط. يمكننا الآن تغيير قيمة الارتفاع بأمان من 500 بكسل إلى 100% على سبيل المثال.

إذن خصائص CSS لكتلة الفصل محاذاة النصسوف تبدو مثل هذا:

محاذاة النص (العرض: جدول؛ العرض: 500 بكسل؛ الارتفاع: 100%؛ الموضع: نسبي؛ التجاوز: مخفي؛ الحد: 1 بكسل أسود خالص؛)

كل ما تبقى هو تنفيذ توسيط المحتوى. للقيام بذلك، يتم تضمين حاوية div في كتلة فئة محاذاة النص(هذه هي نفس الكتلة الصفراء في الصورة)، تحتاج إلى تعيين خاصية CSS العرض: خلية الجدول، فسوف يرث ارتفاع 100% من الكتلة الأصلية محاذاة النص(كتلة أرجوانية). ولن يمنعنا أي شيء من محاذاة محتويات حاوية div المتداخلة في المركز مع الخاصية محاذاة عمودية: وسط.

نحصل على قائمة إضافية أخرى لخصائص CSS لكتلة div المتداخلة في الحاوية محاذاة النص.

قسم محاذاة النص (العرض: خلية جدول؛ محاذاة رأسية: وسط؛)

هذه هي الحيلة كلها. إذا رغبت في ذلك، يمكن أن يكون لديك ارتفاع متغير مع توسيط المحتوى.

لمزيد من المعلومات حول المحاذاة الرأسية لكتلة ذات ارتفاع متغير، راجع .