Question

这是小提琴：

<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/

我知道可以通过在第一个div中添加“line-height：50”来实现目标（不是在小提琴中完成）。但是我们假设我可以多次改变高度，我也不想设置线高。它可以以某种方式100％？

Answer 1

您需要添加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>

Example

Answer 2

如果要保留当前的html结构，请更改“显示” 所有div的属性 - 包装器和两个容器，并丢弃它们的“浮动”属性。

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;
 }

如果有必要保留div的浮动行为，这只是可以使用javascript完成，它将使用文本调整div的高度和行高。

http://jsfiddle.net/U9m96/

 $(document).ready(function() {
    var picHeight =  $("#pic").outerHeight();
    $("#text").css({"height": picHeight, "line-height":picHeight+"px"}); 
 });

将文本垂直对齐，图像中间 - 自动线高

2 个答案: