Вертикальное выравнивание изображения внутри меньшего контейнера

Question

Хорошо, вот моя проблема. У меня есть блок шириной 348 пикселей, а справа 144 пикселя, я хочу центрировать изображение по вертикали. Легко, правда? Моя проблема в том, что я не знаю высоты изображения или блока. Как я могу вертикально центрировать изображение, чтобы пройти мимо верхней части контейнера, не делая его фоновым изображением?

CSS 
#block { width: 348px; position: relative; } 
#content { width: 164px; padding: 20px; margin-right: 144px; } 
#image { width: 144px; position: absolute; right: 0; } 

MARKUP 
<div id="block"> 
    <div id="image"><img url="imageurl" /></div> 
    <div id="content">Some content goes here.</div> 
</div> 

Я не знаю, сколько это поможет, но, надеюсь, оно что-то делает.

Answer 1

решение с использованием только CSS, на основании текущего HTML-разметки и как указывает тегах можно осуществить следующим образом:

Смотрите этот working Fiddle пример!

HTML

<div id="block"> 
    <div id="content">Some content goes here.</div> 
    <div id="image"> 
     <img src="path_to_image" /> 
    </div> 
</div> 

CSS

#block { 
    width: 348px; 
    display: table;   /* set the main wrapper to display as a table */ 
} 
#content { 
    width: 164px; 
    padding: 20px; 
} 
#image { 
    width: 144px; 
    display: table-cell; /* set the inner wrapper to display as a cell */ 
    vertical-align: middle; /* tell to vertically align the contents */ 
} 

необходимо удалить некоторые CSS position заявления, которые используются конфликт с техникой. Но вы можете достичь точно такой же компоновки без них, тем самым позволяя CSS vertical-align:middle работать так, как ожидалось.

---

Решение JQuery к разметке без удаления любой из ваших существующих деклараций CSS и достижения точно той же цели:

Посмотреть этот working Fiddle пример!

JQuery

Добраться до img внутри #image и собрать его высоту, разделить его на два и применить отрицательную маржу к нему с результирующим значением.

$(function() { 
    var $target = $('#image').find('img'); 

    $target.css({ 
    "margin-top" : "-" + ($target.height()/2) + "px" // adjust the top margin 
    }); 
}); 

CSS

#block { 
    width: 348px; 
    position: relative; 
} 
#content { 
    width: 164px; 
    padding: 20px; 
    margin-right: 144px; 
} 
#image { 
    width: 144px; 
    position: absolute; 
    right: 0; 
    top: 0;    /* fit to the top */ 
    bottom: 0;   /* fit to the bottom */ 
    /*overflow:hidden;*/ /* optional if the img is bigger that this container */ 
} 
#image img { 
    position: absolute; /* remove element from the document flow */ 
    top: 50%;   /* move it down by 50% of its parent height */ 
} 

HTML

<div id="block"> 
    <div id="image"> 
     <img src="path_to_image" /> 
    </div> 
    <div id="content">Some content goes here.</div> 
</div> 

Ваша текущая разметка сохраняется и некоторые дополнительные CSS был добавлен, чтобы сделать его работу. Оставляя часть jQuery максимально простой!

Answer 2

Вы можете абсолютно позиционировать изображение внутри контейнера, или если это не работает в вашем случае, вам нужно будет использовать javascript, чтобы получить высоту контейнера и высоту изображения и поместить изображение таким образом ,

Чтобы установить его с помощью CSS:

Установить стиль «позиции: относительная» на вашем элементе контейнера. Затем установите стиль вашего изображения на «position: absolute; top: 50%;». Вы также можете добавить высоту в свой контейнер.