Question

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

在Dreamweaver和Chrome中工作。我在div中间垂直对齐图像时遇到问题，所以我在这里创建了一个小提琴，但小提琴实际上在中心垂直对齐图像。所以对此发生的事情有点困惑。它甚至可以在代码片段中使用，但是我在浏览器中打开文件并且它无法正常工作。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

它是float:left。您已经position:relative，因此您可以删除margin:left;和float:left。

.webinar-header-logo {
/* float: left; */
height: 75px;
line-height: 34px;
left: 45px;
position: relative;
display: table-cell;
vertical-align: middle;
}

Answer 3

尝试使用以下方式设置div的样式：显示：table-cell; vertical-align：middle;

Answer 4

您的示例和代码段有所不同。要修复您网站的代码，您应该使用display: inline-block和height:100%。这篇帖子得到了很好的解答：

How to vertically align an image inside div

* {
  padding: 0;
  margin: 0;
  border: 0;
}
.webinar-header {
  background: #00A9FF;
  display:inline-block;
  height:100%;
  position: relative;
  overflow: hidden;
  line-height: 75px;

}
.webinar-header-logo {
  float: left;
  height: 75px;
  display:inline-block;
  line-height: 75px;
  margin-left: 13px;
  position: relative;
  vertical-align:middle;
}
.webinar-header img {
  vertical-align: middle;
  display:inline-block;
  height:100%;
}

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

Answer 5

这是您网站上的!DOCTYPE。

更改自：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

...到

<!DOCTYPE html>

请参阅Vertical-align not working with XHTML 1.0 Transitional doctype?

垂直对齐在小提琴中工作，但不在浏览器中

5 个答案: