Блог

Я не уверен, что это можно сделать с помощью CSS, но хотел подтвердить это здесь.

Это фрагмент кода.. http://jsfiddle.net/2CHEb

HTML:

 <div class="wraptocenter"><span></span>
<img src="blah" /></div> 
<div class="description">Lorizzle ipsum dolor sit amizzle, tellivizzle adipiscing fo shizzle. Owned sapizzle velizzle, bizzle volutpizzle, nizzle quis, gangster vizzle, arcu. Pellentesque eget tortizzle. Sizzle </div>
  

CSS:

 .wraptocenter {   
background: orange;
float: left;
height: 120px;
margin: 0 10px 5px 0;
width: 120px;
}

.wraptocenter img {
    max-height: 120px;
    width:120px;
}
  

Некоторые приемы, такие какhttp://www.brunildo.org/test/img_center.html
работает, но если я перемещаю div, он перестает работать.

Я перемещаю div, чтобы другой div, содержащий текст, мог обтекать изображение, как газетную статью.

Кроме того, я получаю изображение с другого веб-сайта и устанавливаю ширину в 120 пикселей. Таким образом, это сделает высоту динамической и каждый раз разной.

Возможно ли это? Спасибо.

Если вы поставите position:relative; на свой .wraptocenter, а затем position:absolute; float:left; top:50%; margin:-60px 0 0 0; затем, вы сможете отцентрировать изображение по вертикали.

Другим вашим вариантом было бы сделать изображение фоновым изображением и расположить его в процентах (или пикселях)

Это будет работать в современных браузерах и IE8 .

IE7 просто не поддерживает display: table-cell . Я надеюсь, вам не нужна поддержка IE7 🙂

http://jsfiddle.net/2CHEb/6/

 .wraptocenter {   
    float: left;
    margin: 0 10px 5px 0;
}
.wraptocenter > div {
    height: 120px;
    width: 120px;
    background: orange;
    display: table-cell;
    vertical-align: middle
}
.wraptocenter img {
    max-height: 120px;
    width: 120px;
    display: block
}