وحدة تخطيط Flexbox CSS3 - قم بمحاذاة عنصر المستوى المضمن عندما يكون عنصرًا مرنًا

Question

نظرًا لأنني حصلت على كود HTML هذا:

<div>
    <h2>What is Lorem Ipsum?</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a href="#">Read more</a>
</div>

و CSS:

div {
    display: flex;
    flex-direction: column;
    padding: 1em;
    border: 1px solid #DDD;
    border-radius: 10px;
}

div h2 {
    font-size: 1.2307em;
    text-align: center;
}

div p {
    flex: 1;
    margin: 0.7692em 0;
}

كيف يمكنني تصميم المرساة بحيث تكون في المنتصف أفقيًا؟

Answer 1

تعيين align-self: center على ال <a> (مع إصدارات خاصة بالمتصفح من الخاصية أيضًا بالطبع).تصبح العناصر المضمنة بالفعل عناصر مرنة، لذلك لا حاجة إلى غلاف على مستوى الكتلة <a>.

ومع ذلك، إذا كنت ستستخدم flexbox، فسوف تكتشف بسرعة أنه غالبًا ما يتطلب divs ملتفة إضافية، لذلك قد تعتاد على ذلك الآن.طالما أنك لا تصاب بالجنون معهم، فهذا ليس بالأمر السيئ.تتحدث مواصفات HTML5 أيضًا عن مدى ملاءمة استخدام div لأغراض العرض التقديمي.لذلك لا تشعر بالذنب حيال ذلك عندما يتعين عليك إضافة واحدة فقط.

Answer 2

طريقة واحدة هي:

1. جعل مرساة الخاص بك عنصر كتلة (عرض: كتلة)
2. أعطها عرض (أي 80 بكسل) والهامش السيارات
3. ويعطيه فينالي عرضا للحاوية (أي 100٪)

   هنا هو CSS giveacodicetagpre.

   و html giveacodicetagpre.

Answer 3

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

يمكنك أيضا استخدام CSS هذا على التعليمات البرمجية الخاصة بك كما لديك الآن: giveacodicetagpre.

Answer 4

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

أو

واستخدام خاصية "محاذاة النص". giveacodicetagpre.

p> http://www.w3.org/tr/css3-flexbox/ # محاذاة النفس