title: How to align horizontally elements without using Flexbox?
body: <p>Is there a way to align the web components next to each other without using <code>Flexbox</code>. I know it an awesome tool but unfortunately it doesn't work with IE 9 or 10. I want the text inside the link to appear right next to the images. JSFiddle shows the working code but with FlexBox, how can I achieve this without using Flexbox?</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;display:setProperty name="paging.banner.full" value='&lt;span class="pagelinks"&gt; &lt;a href="{1}"&gt; &lt;img src="../images/integration/FastLeft.jpg"/&gt; &lt;/a&gt; &lt;a href="{2}"&gt; &lt;img src="../images/integration/SlowLeft.jpg"/&gt; &lt;/a&gt; | Page {5} of {6} | &lt;a href="{3}"&gt;  &lt;img src="../images/integration/SlowRight.jpg"/&gt; &lt;/a&gt; &lt;a href="{4}"&gt; &lt;img src="../images/integration/FastRight.jpg"/&gt; &lt;/a&gt;&lt;/span&gt;'/&gt;
          &lt;display:setProperty name="paging.banner.first" value='&lt;span class="pagelinks"&gt; &lt;img src="../images/integration/FastLeft.jpg"/&gt; &lt;img src="../images/integration/SlowLeft.jpg"/&gt; | Page {5} of {6} | &lt;a href="{3}"&gt; &lt;img src="../images/integration/SlowRight.jpg"/&gt; &lt;/a&gt; &lt;a href="{4}"&gt; &lt;img src="../images/integration/FastRight.jpg"/&gt; &lt;/a&gt;&lt;/span&gt;'/&gt;
          &lt;display:setProperty name="paging.banner.last" value='&lt;span class="pagelinks"&gt; &lt;a href="{1}"&gt; &lt;img src="../images/integration/FastLeft.jpg"/&gt; &lt;/a&gt; &lt;a href="{2}"&gt; &lt;img src="../images/integration/SlowLeft.jpg"/&gt; &lt;/a&gt; | Page {5} of {6} | &lt;img src="../images/integration/SlowRight.jpg"/&gt; &lt;img src="../images/integration/FastRight.jpg"/&gt; &lt;/span&gt;'/&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.pagelinks {
  float: right;
  margin-right: 48%;
  color: #828282;
  display: table-cell;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center; 
  }
  
  .pagelinks a {
  text-decoration: none;
  }
  
  .pagelinks img {
   border: 1px solid transparent;
  }
  
  .pagelinks img:hover {
   border-radius: 3px;
   border: 1px solid #828282;
  } 
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ssadat/3h1mytqn/" rel="nofollow noreferrer">JSFiddle</a></p>