CODEWITHSUNDEEP
htmlcss
Adjit
Adjit

Reputation: 10305

Vertical Align working in fiddle, but not in browser

No scripts or anything, just pure CSS and HTML.

Working in Dreamweaver and Chrome. I am having issues vertically aligning an image in the middle of a div, so I created a fiddle to post here, but the fiddle actually aligns the image vertically in the center. So a bit confused on what is going on with this. It even works here in the code snippet, but I open the file in my browser and it just doesn't work.

Here is the live example of this issue. There is no difference in code between the fiddle, the code snippet and the live form.

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

Upvotes: 0

Views: 55

Answers (5)

Michel
Michel

Reputation: 28349

Remove float: left from your .webinar-header-logo style.

There is no need for it, at least in the markup you posted

Upvotes: 2

knocked loose
knocked loose

Reputation: 3314

It's the float:left. You're already position:relative so you can remove your margin:left; and float:left.

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

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

It's the !DOCTYPE on your site.

Change from:

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

… to

<!DOCTYPE html>

See Vertical-align not working with XHTML 1.0 Transitional doctype?

Upvotes: 0

Jeff
Jeff

Reputation: 2423

There was a difference in your example and your snippet. To fix your site's code you should use display: inline-block and height:100%. This was answered quite well on this post:

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>

Upvotes: 0

M&#225;rcio Gonzalez
M&#225;rcio Gonzalez

Reputation: 1040

Try to style your div with: display: table-cell; vertical-align: middle;

Upvotes: 0

Related Questions