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>