I'm having trouble aligning multiple divs horizontally in my code. Here is the simple test code I am using.
<div style="text-align: center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>
While it looks fine in Chrome, it does not work correctly in IE as shown in the picture below.
https://i.sstatic.net/RpAqC.png
I'm wondering why there is a difference between IE and Chrome in the display of the divs. Any insights or solutions would be greatly appreciated.