How to align horizontally elements without using Flexbox?

Question

Is there a way to align the web components next to each other without using Flexbox. 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?

Code:

<display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
        <display:setProperty name="paging.banner.first" value='<span class="pagelinks"> <img src="../images/integration/FastLeft.jpg"/> <img src="../images/integration/SlowLeft.jpg"/> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
        <display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <img src="../images/integration/SlowRight.jpg"/> <img src="../images/integration/FastRight.jpg"/> </span>'/>

CSS

.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;
} 

JSFiddle

Poleaxe

Try float left/right – Rampant

Have you understood my question? float left/right will move the component left/right while I want them to be aligned :) – Poleaxe

Did you check your jsfiddle? – Shum

@Dekel, is something wrong with it? – Poleaxe

I am trying to get it without using Flexbox.JSFiddle shows with Flexbox. – Poleaxe

The text in the middle Page 5 of 6 goes a little lower than the images without using FlexBox. – Poleaxe

I understand that flexbox doesn't have the support you need, but you might consider a polyfill. github.com/jonathantneal/flexibility Good luck!! – Oraliaoralie

I was looking into Flexibility but it requires some additional stuff to be added and just for one section of entire application, to me it makes no sense to use. – Poleaxe

Understand, looks like you found your solution! Since you have images you can use vertical-align on them to get them vertically centered. – Oraliaoralie

Answer 1

For IE10 and below (maybe till IE7/8),

you have 2 solutions:

inline-block

you can use display:inline-block and vertical-align:middle in img, and wrap it all with a div using some width and margin:auto to center it horizontally

div {
  width: 50%;
  /* change the value as you prefer, even in px */
  margin: auto;
  text-align: center;
  /*demo*/
  border: 1px solid red;
}

.pagelinks {
  color: #828282;
}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
}

.pagelinks img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
}

<div>
  <span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>
</div>

table/table-cell

applying display:table to .page-links and vertical-align:middle to img, and again wrapping it in a div to center.

div {
  width: 50%;
  margin: auto;
}

.pagelinks {
  color: #828282;
  display: table;
  width: 100%;
  text-align: center;
  /*demo*/
  border: 1px solid red;
}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
  vertical-align: middle;
}

.pagelinks img:hover {
  border-radius: 3px;
  border: 1px solid #828282;
}

<div>
  <span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>
</div>

Epigenesis

Answer 2

Without Flexbox

HTML

<div class="container">
<span class="pagelinks"> 
  <a href="{1}"> 
    <img src="../images/integration/FastLeft.jpg"/> 
  </a> 
  <a href="{2}"> 
    <img src="../images/integration/SlowLeft.jpg"/> 
  </a> 
  | Page {5} of {6} | 
  <a href="{3}">  
    <img src="../images/integration/SlowRight.jpg"/> 
  </a> 
  <a href="{4}"> 
    <img src="../images/integration/FastRight.jpg"/> 
  </a>
</span>
</div>

CSS

.container {
  width: 100%;
}
.pagelinks {
  display: block;
  text-align: center;

}

.pagelinks a {
  text-decoration: none;
}

.pagelinks img {
  border: 1px solid transparent;
  vertical-align: middle;
}

https://jsfiddle.net/3h1mytqn/1/

Oraliaoralie