Question

我试图通过将行高设置为div高度来垂直对齐div中的某些文本。当div中只有文本时，以及div中有一个小图像时，这样可以正常工作。但由于某种原因，当div中的图像超出一定大小时，它会开始向下推动文本。 Check out this fiddle我做了证明。

在小提琴中有4个div，它们都有height: 40px和line-height:40px。唯一的区别是第二，第三和第二第4个div也有大小，中，大的图像：

 .small{height:20px;}
 .medium{height:30px;}
 .large{height:40px;}

那么为什么第三个第四张图像弄乱了垂直对齐？

Answer 1

您需要将vertical-align: middle添加到您的img标记，因为它不是inline元素，而是inline-block元素。

查看更新的Fiddle

注意当您的文字超过1行时，您的垂直对齐方法将无效。用于对齐flexbox，确实有好处：）

Answer 2

每张图片下面都有一个小空间。默认情况下，图像以内联方式呈现（实际上是内联块），就像字母一样。它与其他字母所在的线位于同一条线上。对于在j，p和q等字母上找到的下降点，该行下方有空格。

您可以调整图像的垂直对齐方式，将其放置在其他位置。在这种情况下<div class="home"> <div class="title"> <h1 class="h3">Build/Configure Apps</h1> <span class="glyphicon glyphicon-remove"></span> </div> <div class="main"> <div class="row"> <div class="col-sm-4"> <ul class="nav nav-pills nav-stacked"> <li role="presentation" ng-repeat="platform in home.platforms" ng-class="{active: home.isSelected(platform.value)}"> <a ng-click="home.setPlatform(platform.value)">{{platform.displayName}}</a> </li> </ul> <div class="form-inline form-group"> <div class="form-group"> <label for="appId" class="control-label">App Id:</label> <input type="text" name="appId" ng-model="home.appId" class="form-control"> </div> </div> <div class="form-group"> <button type="button" name="button" class="btn btn-sm btn-primary col-sm-8" ng-click="home.makeAjaxCall()">Submit</button> </div> </div> <div class="col-sm-8"> <h2>This right content should be updated when click on the left nav bar, but the left should not</h2> </div> </div> </div> </div>会好的。

此答案详细介绍了该问题：Mystery white space underneath image tag

Answer 3

垂直对齐是他们从来没有做过的事情之一 - 尝试用Google搜索一些文章。

我现在的反应是尝试在每张图片上使用vertical-align：middle - 但不能保证 - 我总是需要进行实验，您可能会从不同的浏览器中获得不同的结果。

我发现的唯一全浏览器答案是创建一个2列表（可能在div框内，但不一定）并将文本放在一个单元格中（文本在表格单元格中自动垂直居中）然后将匹配的图像放在下一个单元格中（它将自动扩展到图像的高度）。

阿伦的表很棒？（有些人不这么认为......）

为什么img标签会从行高调整垂直对齐？

3 个答案: