вот скрипка:
<div style="background-color: yellow;">
<div style="background-color: red; float: left;">1</div>
<div style="background-color: green; float: left;"><img src="http://static.idokep.hu/images/nagyelore/ujikon2/030.png" width="108" height="50" /></div>
</div>
Я знаю, что цель может быть достигнута путем добавления "line-height: 50" к первому div (не сделанному в скрипке). Но давайте предположим, что я могу многократно изменять высоту, и я тоже не хочу устанавливать линейный контур. Это может быть как-то на 100%?
#wrapper {
display:table-row;
}
#text {
display:table-cell;
float:none !important;
height:100px;
vertical-align:middle;
}
#pic {
display:table-cell;
float:none !important;
vertical-align:middle;
}
$(document).ready(function() {
var picHeight = $("#pic").outerHeight();
$("#text").css({"height": picHeight, "line-height":picHeight+"px"});
});
Вам нужно добавить vertical-align: middle
. Немного изменилась структура:
.text {
background-color: red;
display: inline;
vertical-align: middle;
}
img {
vertical-align: middle;
}
<div style="background-color: yellow;">
<div class="text">1</div>
<img src="http://static.idokep.hu/images/nagyelore/ujikon2/030.png" width="108" height="50" />
</div>