عندما كنا نكتب الحصان، ربما لم نكن نعرف الكثير عن طريقة التوسيط الأفقي والرأسي. لذلك سأقدم لك ملخصًا للعديد من طرق التوسيط الأفقي والرأسي شائعة الاستخدام.
الطريقة الأولى <!--html box code--><!--توسيط أفقيًا وعموديًا--><div class=Centered1> <p>d النوع الأول</p></div><!-جزء نمط css--> .Centered1{ لون الخلفية: #800070؛ العرض: 100٪ الارتفاع: 500 بكسل؛ 200 بكسل؛ لون الخلفية: وردي غامق؛ ارتفاع الخط: 200 بكسل؛ الموضع: اليسار المطلق: 0؛ اليمين: 0؛ الطريقة الثانية <!--رمز مربع html--><!--توسيط أفقيًا وعموديًا--><div class=Centered2> <p>نوع dSecond</p></div><!-جزء نمط css--> / *الطريقة الثانية هي التوسيط الأفقي والرأسي*/ .Centered2{ لون الخلفية: #ef8518; العرض: 100% الارتفاع: 500 بكسل; الموضع: نسبي; 200 بكسل الارتفاع: 200 بكسل؛ لون الخلفية: أحمر؛ ارتفاع الخط: 200 بكسل؛ الطريقة الثالثة <!--html box code--><!--توسيط أفقيًا وعموديًا--><div class=Centered3> <p>d النوع الثالث</p></div><!-جزء نمط css--> /*الطريقة الثالثة هي التوسيط الأفقي والرأسي*/ .Centered3{ لون الخلفية: عرض خافت: 100% الارتفاع: 500 بكسل; 200 بكسل الارتفاع: 200 بكسل؛ لون الخلفية: برتقالي داكن؛ ارتفاع الخط: 200 بكسل؛ الطريقة الرابعة <!--رمز مربع html--><!--متمركز أفقيًا وعموديًا--><div class=Centered4> <p>النوع الرابع د</p></div><!-جزء نمط css--> /*الطريقة الرابعة هي التوسيط الأفقي والرأسي، الإصدار القديم من التخطيط المرن*/ .Centered4{ لون الخلفية: #FF4444 width: 100% height: 500px Display: -webkit-box; -webkit-box-pack:center;-webkit-box-align: center; .Centered4 p { width: 200px; الطريقة الخامسة <!--html box code--><!--توسيط أفقيًا وعموديًا--><div class=Centered5> <p>النوع الخامس د</p></div><!-جزء نمط css--> /*الطريقة الخامسة هي التوسيط الأفقي والرأسي، الإصدار الجديد من flex هو التوسيط الأفقي والرأسي*/ .Centered5{ لون الخلفية: darkslateblue width: 100% height: 500px; ; محاذاة العناصر: المركز } .Centered5 p { العرض: 200 بكسل الارتفاع: 200 بكسل؛ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.