title: How to align text inside the div tag with the links.
body: <p>I am trying to align the text inside the div tag with the links but I am unable to do it. Please take a look at the fiddle. Images are a little up than the text Page 5 of 6. </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;&amp;nbsp | Page {5} of {6} | &amp;nbsp&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%;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  color: #828282;
  }
  
  .pagelinks a {
  text-decoration: none;
  display: inline-block;
  background-repeat:  no-repeat;
  }
  </code></pre>
  
  <p>Thanks</p>
  
  <p><a href="https://jsfiddle.net/ssadat/4q6h8czs/" rel="nofollow noreferrer">JSFiddle</a></p>