Может ли кто-нибудь выровнять изображение по вертикали с помощью HTML и CSS? - PullRequest
Новая
       41

Может ли кто-нибудь выровнять изображение по вертикали с помощью HTML и CSS?

0 голосов
/ 15 апреля 2011

Я не уверен, можно ли это сделать с помощью 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, содержащий Text, может обернуться вокруг изображения, как газетная статья.

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

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

Ответы [ 2 ]

1 голос
/ 15 апреля 2011

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

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

0 голосов
/ 15 апреля 2011

Это будет работать в современных браузерах и 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
}
...