باستخدام موقف كس: الملكية المطلقة يسمح لك لوضع عنصر داخل الحاوية الأم مع الإحداثيات المطلقة. ومع ذلك ، غالبا ما يكون من الضروري محاذاة مثل هذا العنصر ليس فقط على طول المحور الرأسي أو الأفقي ، ولكن أيضا على طول كليهما في وقت واحد. في هذه المقالة ، سننظر في عدة طرق لتوسيط عنصر باستخدام الموضع: مطلق.
الطريقة الأولى هي استخدام خصائص اليسار: 50 ٪ وأعلى: 50 ٪ ، جنبا إلى جنب مع تحويل: ترجمة(-50 ٪ ، -50٪). يقوم هذا الأسلوب بمحاذاة العنصر مع مركز الحاوية الأصلية رأسيا وأفقيا. يعتمد موضع العنصر على حجم العنصر نفسه وحاويته الأصلية.
هناك طريقة أخرى لتوسيط عنصر بالموضع: مطلق وهي استخدام الخصائص اليسار: 0 ، اليمين:0 ، أعلى: 0 وأسفل:0 ، بالاشتراك مع الهامش: تلقائي. يركز هذا النهج العنصر أفقيا وعموديا في نفس الوقت ، دون الحاجة إلى تعيين القيم كنسبة مئوية.
بغض النظر عن الطريقة المختارة ، في حالة استخدام الموضع: مطلق ، يجب أن يؤخذ في الاعتبار أنه ستتم معالجة المحاذاة بالنسبة إلى أقرب عنصر أصل لا تكون قيمة موضعه ثابتة (أي التي تم تعيين قيمة الموضع على نسبي أو مطلق أو ثابت).
- محاذاة عنصر باستخدام الموضع المطلق
- ما هو الموقف المطلق?
- باستخدام أعلى ، أسفل ، اليسار واليمين لتحديد المواقع
- مشكلة المحاذاة في المركز
- حل المشكلة باستخدام التحويل والترجمة
- مزايا استخدام الموضع المطلق لمحاذاة المركز
- سؤال وجواب
- كيف أقوم بمحاذاة عنصر مع خاصية الموضع المطلق للمركز داخل الحاوية الأم?
- هل من الممكن لمحاذاة عنصر مع موقف المطلق في وسط الصفحة?
- هل هناك أي طرق أخرى لمحاذاة عنصر مع الموقف المطلق في المركز?
محاذاة عنصر باستخدام الموضع المطلق
عندما نريد محاذاة عنصر إلى وسط صفحة ويب ، فإن أحد الخيارات هو استخدام الموضع: خاصية مطلقة.
بادئ ذي بدء ، دعنا نحدد الموضع: الخاصية النسبية للعنصر الأصل. سيسمح لنا ذلك بتحديد موضع العنصر الفرعي بالنسبة إلى الوالد.
ثم أضف الموضع: الخصائص المطلقة إلى العنصر الفرعي وقم بتعيين القيم أعلى: 50 ٪ واليسار: 50٪. ستعمل هذه القيم على تعيين المواضع العلوية واليسرى للعنصر إلى 50 ٪ بالنسبة إلى الأصل.
لكي يتم عرض العنصر بالضبط في المركز ، نحتاج إلى تحريكه نصف عرضه وارتفاعه إلى اليسار وإلى الأعلى. للقيام بذلك ، يمكننا استخدام التحويل: ترجمة الخصائص(-50 ٪ ، -50٪).
هنا مثال على التعليمات البرمجية:
العنصر الخاص بك
سيسمح لك هذا الرمز بمحاذاة العنصر إلى وسط الصفحة ، بغض النظر عن حجمه.ما هو الموقف المطلق?
الموضع المطلق هو أحد قيم خاصية موضع كس ، والتي تسمح لك بتعيين الموضع الدقيق لعنصر ما على الصفحة بالنسبة إلى العنصر الأصلي أو أقرب سلف بموضع معين.
لتطبيق خاصية الموضع المطلق على عنصر ، يجب تعيين قيمته على مطلق:
يقع محتوى العنصر هنا
بمجرد تعيين قيمة الموضع على المطلق ، سيخرج العنصر من التدفق الطبيعي للمستند ، وسيتم تحديد موقعه باستخدام مجموعة من الخصائص أعلى ، يمين ، أسفل ، يسار.
من المهم ملاحظة أنه عند تعيين عنصر على الموضع المطلق ، يتم إصلاح موضعه بالنسبة لأقرب أصل ، والذي له قيمة موضع غير ثابت (افتراضيا).
عند استخدام الموضع مطلق ، غالبا ما يكون من الضروري توسيط العنصر أفقيا و/أو رأسيا. للقيام بذلك ، يمكنك استخدام مجموعة من قيم الخصائص العلوية واليمنى والأسفل واليسرى.
على سبيل المثال ، لتوسيط عنصر أفقيا ، يمكنك استخدام القيم التالية:
يقع محتوى العنصر هنا
في هذا المثال ، يتم تعيين القيمة اليسرى على 50 ٪ ، مما يعني أن الجانب الأيسر من العنصر سيكون في المنتصف أفقيا. ثم يتم استخدام خاصية التحويل: ترانسلاتكس (-50٪) لتحويل العنصر بمقدار نصف عرضه إلى اليسار من أجل توسيطه أفقيا تماما.
أيضا ، عند استخدام الموضع المطلق وتوسيط العنصر أفقيا ، يجدر بنا أن نتذكر العنصر الأصل ، والذي يجب أن يكون له الموضع: تعيين الخاصية النسبية لجعله نقطة مرجعية لوضع العناصر المطلقة.
باستخدام أعلى ، أسفل ، اليسار واليمين لتحديد المواقع
لوضع العناصر باستخدام سمة الموضع في كس ، عادة ما يتم استخدام مزيج من السمات العلوية والسفلية واليسرى واليمنى. تسمح لك هذه السمات بتعيين المسافة بين الجانب المحدد للعنصر وعنصر الواجهة.
تحدد السمات العلوية والسفلية واليسرى واليمنى المسافة بالبكسل أو النسب المئوية من الجانب المحدد من الشاشة أو العنصر الأصل إلى حد العنصر المقابل.
على سبيل المثال ، إذا كنت تريد محاذاة عنصر عموديا وأفقيا ، يمكنك استخدام التعليمات البرمجية التالية:
.العنصر {
اليسار: 50%;
توسيط العناصر البسيطة عادة لا يسبب مشاكل ويمكن تحقيقه باستخدام خاصية كس
صحيح
تتمثل إحدى طرق حل هذه المشكلة في استخدام مجموعة من الخصائص
أعلى
- ، مع تعيين القيم المقابلة لمحاذاة العنصر في وسط الشاشة. ومع ذلك ، تتطلب هذه الطريقة حسابات أكثر تعقيدا وليست عالمية دائما.
- اليسار: 50%
للعنصر مع
موضع: مطلق
. سيؤدي هذا إلى وضع العنصر في الزاوية اليسرى العلوية من نافذة المتصفح.
استخدم العقار
تحويل
مع قيمة
ترجمة (-50٪ ، -50٪)
لتحويل العنصر إلى اليسار وأعلى بنسبة 50 ٪ من عرضه وارتفاعه ، على التوالي. بهذه الطريقة ، سيكون العنصر بالضبط في وسط الشاشة ، بغض النظر عن حجمه.
على سبيل المثال ، بتطبيق هذا الأسلوب على كتلة ذات موضع مطلق ، يمكنك محاذاتها مع وسط الشاشة على النحو التالي:
.وضع كتلة {
موضع: مطلق;
- أعلى: 50%;
- اليسار: 50%;
- تحويل: ترجمة (-50٪ ، -50٪);
- }
سيسمح ذلك بمحاذاة العنصر ذو الموضع المطلق مع وسط الشاشة ، متكيفا ومستقلا عن محتوى الصفحة.
حل المشكلة باستخدام التحويل والترجمة
إذا كان العنصر يحتوي على الموضع: مجموعة الخاصية المطلقة; وتحتاج إلى محاذاة في المركز ، واحدة من الطرق لحل هذه المشكلة هو استخدام التحولات كس ، وهي تحويل: ترجمة خصائص(-50٪ ، -50٪);
للقيام بذلك ، قم بتطبيق الأنماط التالية على العنصر:
تعيين الموضع: مطلق ؛ خاصية العنصر لأخذها من دفق المستند.
قم بتعيين أبعاد العنصر والعرض والارتفاع الذي سيسمح بوضعه في وسط الصفحة. يمكنك استخدام قيم محددة بالبكسل أو وحدات قياس أخرى.
تعيين خصائص أعلى: 50 ٪ ؛ واليسار: 50%; من أجل وضع عنصر في وسط الصفحة ، ليس فقط في المنتصف تماما ، ولكن بحيث تكون الزاوية العلوية اليسرى في وسط الصفحة.
تطبيق التحويل: ترجمة الخاصية (-50 ٪ ، -50٪) ؛ للعنصر. سيسمح لك تحويل الترجمة مع القيم السلبية بتحويل العنصر بمقدار نصف عرضه وارتفاعه إلى اليسار وإلى الأعلى. هذا هو ما سيسمح لك بمحاذاة وسط الصفحة.
ويرد أدناه مثال على التعليمات البرمجية التي تنفذ هذا الحل:
محتوى العنصر
في هذا المثال ، يتم إنشاء عنصر كتلة مع فئة "العنصر المركزي" ، والتي يتم تعيين الأنماط المذكورة أعلاه. سيكون النص" محتوى العنصر " موجودا في وسط هذا العنصر. يتم تعيين ارتفاع وعرض العنصر في 200 بكسل ، ولكن يمكنك استخدام قيم أخرى وفقا للحجم المطلوب للعنصر.
هذا الحل ، وذلك باستخدام التحولات كس ، يسمح لك بسهولة ومرونة محاذاة العناصر مع الموقف: الملكية المطلقة; في وسط الصفحة دون الحاجة إلى معرفة وإصلاح أحجامها مقدما.
مزايا استخدام الموضع المطلق لمحاذاة المركز
الموضع المطلق هو أحد أكثر الطرق فعالية لمحاذاة العناصر في المركز. يسمح لك بالتحكم الكامل في موقع العنصر وتعيينه على الموضع المطلوب على الصفحة.
المزايا الرئيسية لاستخدام الموقف المطلق لمحاذاة المركز:
المرونة والراحة: عند استخدام الموضع المطلق ، يمكنك تعيين إحداثيات عنصر يدويا وتحديد موضعه الدقيق على الصفحة. هذا يجعل من الممكن محاذاة العناصر أفقيا وعموديا في المركز ، وكذلك الجمع بين محاذاتها حسب الحاجة.
بغض النظر عن بقية المحتوى: يسمح لك الموضع المطلق بمحاذاة العناصر دون التفاعل معها على الصفحة. هذا يعني أنه يمكنك بسهولة إضافة وإزالة عناصر أخرى على الصفحة دون كسر التمركز.