Vertical Align working in fiddle, but not in browser

Question

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>

Positioning the image all the way to the left. I suppose that's not necessary, but will that effect the vertical align? — Adjit, Mar 05 '15 at 20:10

Michel · Accepted Answer · 2015-03-05T20:21:31.350

2

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

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

edited Mar 05 '15 at 20:21

answered Mar 05 '15 at 20:12

Michel

26,600
6
64
69

score 1 · Answer 2 · answered Mar 05 '15 at 20:13

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

score 0 · Answer 3 · answered Mar 05 '15 at 20:05

0

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

answered Mar 05 '15 at 20:05

Márcio Gonzalez

1,020
1
8
20

it is in the second div - `.webinar-header-logo` – Adjit Mar 05 '15 at 20:05

score 0 · Answer 4 · edited May 23 '17 at 11:43

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>

score 0 · Answer 5 · edited May 23 '17 at 11:56

0

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?

edited May 23 '17 at 11:56

Community

1
1

answered Mar 05 '15 at 20:11

Rick Hitchcock

35,202
5
48
79

Vertical Align working in fiddle, but not in browser

5 Answers5