[英]Aligning a text vertically center, middle of image - with automatic line height
here is the fiddle: 这是小提琴:
<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>
http://jsfiddle.net/LgyjZ/ http://jsfiddle.net/LgyjZ/
I know the goal can be achieved by adding "line-height: 50" to the first div (not done in the fiddle). 我知道可以通过在第一个div上添加“ line-height:50”来实现目标(在小提琴中没有完成)。 But lets suppose I can variate the height many times and I dont want to set the lineheight too. 但是假设我可以多次改变高度,而我也不想设置线高。 Can it be somehow 100%? 能以某种方式100%吗?
You need to add vertical-align: middle
. 您需要添加vertical-align: middle
。 Changed structure a little bit: 稍微改变了结构:
.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>
http://jsfiddle.net/P4LxQ/1/ http://jsfiddle.net/P4LxQ/1/
#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;
}
http://jsfiddle.net/U9m96/ http://jsfiddle.net/U9m96/
$(document).ready(function() {
var picHeight = $("#pic").outerHeight();
$("#text").css({"height": picHeight, "line-height":picHeight+"px"});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.