html - 垂直对齐只能在 fiddle 中工作，而不能在浏览器中工作

没有脚本或任何东西，只有纯CSS和HTML。

在Dreamweaver和Chrome中工作。我在div的中间垂直对齐图像时遇到问题，因此我创建了一个小提琴以在此处发布，但该小提琴实际上将图像垂直居中对齐。所以对此产生了一些困惑。它甚至可以在代码段中的此处工作，但是我在浏览器中打开了该文件，但它不起作用。

Here is the live example of this issue.小提琴，代码段和实时表单之间的代码没有差异。

* {
  padding: 0;
  margin: 0;
  border: 0;
}
.webinar-header {
  background: #00A9FF;
  position: relative;
  overflow: hidden;
  height: 75px;
  line-height: 75px;

}
.webinar-header-logo {
  float: left;
  height: 75px;
  line-height: 75px;
  margin-left: 13px;
  position: relative;
  display: table-cell;
  vertical-align:middle;
}
.webinar-header-logo img {
  vertical-align: middle;
}

<div class="webinar-header">
  <div class="webinar-header-logo">
    <img src="http://www.metsales.com/metropolitansales/webinars/images/Metsales-webinar-lp-header.png"/>
  </div>
</div>

最佳答案

从float: left样式中删除.webinar-header-logo。

至少在您发布的标记中没有必要