How can I align inline div elements vertically in IE7?

70 Views Asked by At

I am loading HTML page in MMC snapin. It use IE7. How to vertically align elements a and img inside div tag with style display:inline? The div element has certain height. Since I am using older IE version(IE7) it is not supporting display:flex;

If I use line-height, text is displaying vertically aligned but elements a and img inside div element is not vertically aligned. My divs should be inlined. Please help me.

.Parent {
  width: 700px;
  Height: 50px;
  background-color: red;
}

.child1 {
  width: 200px;
  display: inline;
  text-align: center;
  line-height: 30px;
  height: 30px;
  vertical-align: middle;
  background-color: green;
  border-right: 1px solid yellow;
}

.child2 {
  width: 200px;
  display: inline;
  text-align: center;
  line-height: 30px;
  height: 30px;
  background-color: green;
  border-right: 1px solid yellow;
}
<div class="Parent">
  <div class="child1">
    <a href="" style="padding-left: 5px;padding-right: 5px;"><img height="12" src="img1.png" width="12" id="ImageBeginning" alt="Text"></a>
    <a href="" style="padding-left: 5px;padding-right: 5px;"><img height="12" src="img2.png" width="12" id="ImageLeft" alt="Text"></a>
    <a href="" style="padding-left: 5px;padding-right: 5px;"><img height="12" src="img3.png" width="12" id="ImageRight" alt="Text"></a>
    <a href="" style="padding-left: 5px;padding-right: 5px;"><img height="12" src="img4.png" width="12" id="ImageEnd" alt="Text"></a>
  </div>
  <div class="child2">Dynamic Text</div>
</div>

0

There are 0 best solutions below