في CSS، عليك أن تشكو، يمكنك استخدام الهامش: 0 تلقائي لتحقيق التوسيط الأفقي، ولكن الهامش: التلقائي 0 لا يمكنه تحقيق التوسيط العمودي.
السبب الرئيسي هنا هو أن عنصر التحكم الأصلي، أي عنصر التحكم نفسه، لم يتم وضعه بشكل صحيح. بالنظر مباشرة إلى الكود، تحتاج أولاً إلى استخدام التخطيط النسبي للتحكم الأصلي، ثم تحتاج إلى استخدام التخطيط المطلق لعناصر التحكم التابعة، واستخدام السمات العلوية والسفلية، جنبًا إلى جنب مع الهامش: تلقائي 0؛، لتحقيق تأثير.
.container-vertical { الموضع: العرض النسبي: 100% الارتفاع: 200 بكسل؛ الخلفية: Deepskyblue؛ الهامش السفلي: 20 بكسل؛} .container-vertical-item { الموضع: العرض المطلق: 130 بكسل؛ محاذاة: المركز؛ الخلفية: أصفر؛ ارتفاع الخط: 80 بكسل؛ 0;}توسيط عموديا.png
مركز أفقيا وعموديامن خلال تجربة الإصدار 5.2، يمكننا محاولة ضبط الخصائص اليسرى واليمنى والعلوية والسفلية لعنصر التحكم الفرعي على 0، والهامش: الهوامش التلقائية في جميع الاتجاهات الأربعة. يمكن تحقيق هذا التأثير. يجب أن تحتوي عناصر التحكم الفرعية التي يجب الإشارة إليها على سمة العرض: block؛
انظر إلى الكود
.container-horization-vertical { الموضع: العرض النسبي: 100٪؛ الارتفاع: Deepskyblue؛ الهامش السفلي: 20 بكسل؛} .container-horization-vertical-item { الموضع: العرض المطلق: 150 بكسل؛ 80 بكسل؛ الخلفية: ارتفاع الخط: 80 بكسل؛ 0؛ أسفل: 0؛ يمين: 0؛ملخص: لا يزال هذا الحل جيدًا جدًا عند حل بعض تخطيطات الصفحات غير المعقدة، ويمكن تكييفه مع أي واجهة وجميع المتصفحات تقريبًا. ولكن بالنسبة للصفحات المعقدة للغاية، قد تكون هناك حاجة إلى حلول أخرى، ولكن يمكنك أيضًا الحصول على الإلهام من هذه الفكرة.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.