Member Avatar for brainfo

i am trying to make an image align to be vertically centered. As it works perfect in all browser except IE7 . I already tried a lot.
here is my css and div.

 .vertical_align_center{
     background: none repeat scroll 0 0 #FFFFFF;
        display: table-cell;
        height: 209px;
        line-height: 209px;
        margin: 4px;
        text-align: center;
        vertical-align: middle;
        width: 160px;
       } 
          <div class="vertical_align_center">
          <img src="images/text.jpg" width="100" height="50" />
          </div>

Any help will be greatly appreciated. Thanks in Advance.

  • 2 Contributors
  • 3 Replies
  • 258 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by brainfo

Dani AI

Generated

— the symptom (image centered in modern browsers but top-aligned in IE7) is caused by relying on CSS display: table / display: table-cell. Internet Explorer 6/7 do not support those display values, so the centering technique falls back and fails in IE7. (Authoritative compatibility notes: Microsoft docs and feature tables.) (learn.microsoft.com)

’s advice to check the image path is valid — that is useful (a missing image can change layout). Removing the none token from the background shorthand will not make IE7 suddenly support table-cell; the background shorthand only affects background-image/background-color, not layout. Also confirm the page is rendering in standards mode (valid DOCTYPE / no IE compatibility forcing), since document mode can change how IE behaves.

Practical, IE7-safe fixes (pick one):

  • Inline-block helper (no JS required). Add a zero-width inline-block spacer and keep the image as an inline-block so vertical-align:middle works in old IE:
<div class="vwrap">
  <span class="vhelper"></span>
  <img src="images/text.jpg" alt="">
</div>
.vwrap { height:209px; text-align:center; }
.vhelper { display:inline-block; height:100%; vertical-align:middle; width:0; }
.vwrap img { display:inline-block; vertical-align:middle; }

  • Absolute-position fallback (requires knowing image height): position the img at top:50% and pull it up by half its height with a negative margin-top.

  • Small JS/jQuery shim (robust for variable heights): on window load/resize compute (parent.height - img.height)/2 and apply as a top or margin-top value so IE7 visually centers the image.

The inline-block helper and related IE hacks are a well-known workaround; a JS polyfill that emulates display:table* also exists if rewriting markup is not desirable. (stackoverflow.com)

Recommendation: for minimal change, add an IE7-only stylesheet (conditional comment) and implement the inline-block helper or the tiny jQuery shim there. If IE7 support is not required, drop special-case fixes and keep the modern display:table-cell solution.

Member Avatar for vaporpaul

please send me your domain name then i can easy to analyze and checkout in ie7

Member Avatar for vaporpaul

none

please remove none

and second solution is specify the image path and check whether the image is in the mentioned folder in cpanel

Member Avatar for brainfo

http://www.apprs.com/decezy

well this is the site where I am working now. After clickin 'Add to cart' button at the first row and first column and by clicking 'Add to basket' . It will show a page. Where you can see the google image is align to be at the top in ie7 . however it should be align in middle as displaying in firefox and chrome.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.