تويتر التمهيد 3 ، عموديا مركز المحتوى [مكررة]

Question

هذا السؤال لديه بالفعل إجابات هنا:

عمودي-محاذاة مع التمهيد 3 (23 إجابة)

مغلق منذ 5 سنوات.

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

أنا باستخدام تويتر بوتستراب 3 مع المحتوى الديناميكي لذلك لذلك ، وأنا لا أعرف حجم على النص ولا الصورة.بالإضافة إلى ذلك ، أريد أن يكون كل شيء مستجيبا.

لقد أنشأت بوتبلي أن تلخيص هذا النوع من تخطيط أحاول تحقيقه.في الأساس ، أريد أن يتم توسيط النص والصورة عموديا.النص ليس دائما أكبر من الصورة.

يمكن للشخص مساعدتي مع هذا من فضلك?

يعطيكم الصّحة.

Answer 1

يمكنك استخدام display:inline-block بدلا من float و vertical-align:middle مع هذا المغلق:

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

التجريبي http://bootply.com/94402

Answer 2

الخيار 1 هو الاستخدام display:table-cell.تحتاج إلى إلغاء تعويم Bootstrap col-* باستخدام float:none..

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

---

الخيار 2 يكون display:flex لمحاذاة الصف عموديًا باستخدام flexbox:

.row.center {
   display: flex;
   align-items: center;
}

http://www.bootply.com/7rAuLpMCwr

---

يختلف التمركز العمودي بشكل كبير التمهيد 4.راجع هذه الإجابة لـ Bootstrap 4 https://stackoverflow.com/a/41464397/171456