موقع الزر المركزي CSS محاذاة المركز: تخطيط CSS

الجملة على اليمين

الجملة باستخدام النهاية

ج فيه تعنل

لإنشاء خط أحمر، ما عليك سوى معرفة معلمة واحدة.

هذه هي خاصية المسافة البادئة للنص البسيطة.

. حتى مع ظهور HTML5 وظهور المنافسين الجادينفي شكل مقالة أو رأس، يستمر إدراجها في العلامات في كل مكان. لذلك، أقترح عليك فهم مسألة التنسيق وتوسيط كتل div.

ما هو DIV

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

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

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

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

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

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

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

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

div (الحدود: 1 بكسل صلب #333؛ الحدود اليسرى: لا شيء؛)

تضيف هذه الخصائص مساحة فارغةبين الأشياء، كما تساعد على محاذاتها ووضعها بالطريقة الصحيحة. على سبيل المثال، إذا كانت هناك حاجة إلى نقل كتلة بها صورة من الحافة اليسرى إلى المركز بنسبة 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بالنسبة لمحدد القسم الداخلي، تكتب الكود التالي:

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

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

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

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

تحويل: ترجمة (50%، 50%)؛

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

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

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

التحويل: ترجمة 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 ولا شيء آخر. سيقوم المتصفح ببقية العمل بنفسه:

لمحاذاة النص إلى مركز DIV، وهي عناصر مرنة، يمكن استخدامها استقبال قياسيمحاذاة النص. أو يمكنك جعل كل 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 ل كتلة شعبةمتداخلة في حاوية محاذاة النص.

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

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

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

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

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

الخيار 1: المسافة البادئة السلبية.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 50%؛ يسار : 50%؛ الهامش: -125 بكسل 0 0 -125 بكسل؛ img (أقصى عرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛))

الخيار 2. المسافة البادئة التلقائية.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( العرض: 250 بكسل؛ الارتفاع: 250 بكسل؛ الموضع: مطلق؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ الهامش: تلقائي؛ الحد الأقصى للعرض: 100%؛ الارتفاع: تلقائي؛ العرض: كتلة؛ الهامش: 0 تلقائي؛ الحدود: لا شيء؛ )

الخيار 3. الجدول.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ العرض: الجدول؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ > .inner ( العرض: خلية جدول؛ محاذاة النص: المركز؛ محاذاة رأسية: الوسط؛ ) ) .block ( العرض: كتلة مضمنة؛ img ( العرض: كتلة؛ الحدود: لا شيء؛ ) )

لإضافة تمرير إلى هذا المثال، سيتعين عليك إضافة عنصر آخر إلى التصميم.
مثال: jsfiddle.net/serdidg/fk5nqh52/3.

الخيار 4. العنصر الزائف.

هذا الخيار خالي من جميع المشاكل المذكورة في الأساليب السابقة، ويحل أيضًا المهام المحددة في البداية. النقطة هي أن الأبوينتعيين الأنماط عنصر زائفمن قبل، أي الارتفاع بنسبة 100%، ومحاذاة المركز، ونموذج الكتلة المضمنة. إنه نفس الشيء مع حاجزتم تعيين نموذج كتلة الخط، في المنتصف. ل حاجزلم "تندرج" تحت عنصر زائف، عندما تكون أبعاد الأول أكبر من الأبوين، يشير الأبوينالمسافة البيضاء: nowrap وحجم الخط: 0، وبعد ذلك حاجزقم بإلغاء هذه الأنماط بما يلي - المسافة البيضاء: عادي. في هذا المثال، حجم الخط: 0 مطلوب لإزالة المسافة الناتجة بينهما الأبوينو حاجزبسبب تنسيق التعليمات البرمجية. يمكن إزالة المساحة بطرق أخرى، ولكن من الأفضل تجنبها ببساطة.

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ المسافة البيضاء: nowrap؛ محاذاة النص: المركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100%؛ العرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

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

الأصل (الموضع: ثابت؛ أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ مسافة بيضاء: nowrap؛ محاذاة النص: مركز؛ حجم الخط: 0؛ &: قبل ( الارتفاع: 100% عرض: كتلة مضمنة؛ محاذاة رأسية: المحتوى الأوسط: ""؛

الخيار 5. فليكس بوكس.

واحدة من أبسط الطرق وأكثرها أناقة هي استخدام flexbox. لا يتطلب حركات الجسم غير الضرورية، ويصف بوضوح جوهر ما يحدث، وهو مرن للغاية. الشيء الوحيد الذي يستحق التذكر عند الاختيار هذه الطريقة- دعم IE من الإصدار 10 ضمناً. caniuse.com/#feat=flexbox

الأصل (العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ العرض: مرن؛ محاذاة العناصر: المركز؛ محاذاة المحتوى: المركز؛ ضبط المحتوى: المركز؛ تجاوز السعة: تلقائي؛ ) .block ( الخلفية: #60a839; img ( العرض: كتلة; الحدود: لا شيء; ) )

الخيار 6. التحويل.

مناسب إذا كنا مقيدين بالهيكل ولا توجد طريقة للتلاعب العنصر الأصلي، ولكن يجب محاذاة الكتلة بطريقة أو بأخرى. سوف يأتي للإنقاذ وظيفة المغلقيترجم() . ستؤدي قيمة الموضع المطلق بنسبة 50% إلى وضع الزاوية العلوية اليسرى من الكتلة في المنتصف تمامًا، ثم ستحرك قيمة الترجمة السلبية الكتلة بالنسبة لأبعادها الخاصة. يرجى ملاحظة أن التأثيرات السلبية قد تظهر على شكل حواف غير واضحة أو نمط الخط. أيضًا، يمكن أن تؤدي هذه الطريقة إلى مشاكل في حساب موضع الكتلة باستخدام Java-Script للتعويض في بعض الأحيان عن فقدان 50٪ من العرض بسبب باستخدام المغلق خصائص اليسارالقاعدة المحددة للكتلة يمكن أن تساعد: هامش اليمين: -50%؛ .

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ تجاوز السعة: تلقائي؛ ) .block ( الموضع: مطلق؛ أعلى: 50%؛ يسار: 50%؛ تحويل: ترجمة( -50%، -50%؛ img (العرض: كتلة؛ ) )

الخيار 7. زر.

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

الأصل ( العرض: 100%؛ الارتفاع: 100%؛ الموضع: مطلق؛ الأعلى: 0؛ اليسار: 0؛ الفائض: تلقائي؛ الخلفية: لا شيء؛ الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ ) .block ( العرض: كتلة مضمنة؛ img (العرض: كتلة؛؛ الحدود: لا شيء؛))

علاوة

باستخدام فكرة الخيار الرابع، يمكنك تعيين هوامش خارجية لـ حاجز، وسيتم عرض الأخير بشكل مناسب محاطًا بأشرطة التمرير.
مثال: jsfiddle.net/serdidg/nfqg9rza/2.

يمكنك أيضًا محاذاة الصورة إلى المنتصف، وإذا كانت الصورة أكبر الأبوين، قم بقياسه إلى الحجم الأبوين.
مثال: jsfiddle.net/serdidg/nfqg9rza/3.
مثال مع صورة كبيرة: