مركز رأسيا صورة السوائل في حاوية السوائل

Question

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

أنا بناء معرض عرض الشرائح من الصور. أريد أن يتم عرض الصور كبيرة كما تسمح نافذة المستخدم. لذلك لدي هذا النائب الخارجي: giveacodicetagpre.

(نعم، أنا أستخدم عناصر HTML5). التي لديها CSS التالية: giveacodicetagpre.

بعد ذلك، يتم وضع الصورة داخلها. اعتمادا على اتجاه الصورة، قمت بتعيين العرض أو الارتفاع إلى 75٪، والمحور الآخر إلى السيارات: giveacodicetagpre.

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

أنا عالق. أبحث عن حل CSS، لكنني منفتح على حلول JS أيضا.

Answer 1

هذا يعمل بشكل جيد: giveacodicetagpre.

أنا تخمين عرض خلية عرض لم تعمل لك لأن الحاوية الأصل لم يتم عرضها كجدول.

هنا هو تجريبي في JSfiddle:

http://jsfiddle.net/duopixel/5wzps/

Answer 2

Maybe this works for you (div is the div wrapped around your image):

div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Running example.

Answer 3

Let's skip all of the table nonsense! :)

<div>
    <img src="https://placehold.it/1000x1000">
</div>

div {
    position: relative;
}

img {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

Example: https://jsfiddle.net/te29m9fv/1/