How to center images in a row - css

Question

I have seen that other persons have asked the same question, but the solution does not apply to this problem. The solution should preferably work on different devices, such as iPhone, iPad, etcetera, so a generic solution is preferable - not something that just works on one device.
I have tried to set text-align:center and also tried to set margin-left:auto and margin-right:auto , but it doesn't work.
Html (only the relevant code is included):
<div class="container">
<div class="buttonyear"> <img class="buttonyear" src="./navi/yearen.png" /><span>2014</span></div>
<div class="buttonyear"> <img class="buttonyear" src="./navi/yearen.png" /><span>2013</span></div>
<div class="buttonyear clearfix"> <img class="buttonyear" src="./navi/yearen.png" /><span>2012</span></div>
<br/>
<br/>
</div> <!-- end of navi -->
Css:
.container {
max-width: 48rem;
width: 90%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
body{
background-image: url(../images/gradient.jpg);
}
// todo improve css..ask on stackoverflow..
.navi {
width:100%;
text-align:center;
text-align: center;
margin-left: 42%;
margin-right: 42%;
}
.buttonyear
{
float: left;
}
.buttonyear a
{
text-decoration: none;
}
.logocontainer {
text-align:center;
}
.logo {
width:180px;
height:60px;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Small screens (default) */
html { font-size: 100%; }
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
ul {
list-style-type:none;
}
.buttonyear {
position: relative;
width: 42px;
height: 20px;
}
.buttonyear span {
left: 0;
position:absolute;
width: 100%;
color: white;
font: 12px Gill Sans;
font-weight:600;
text-decoration:none;
text-align:center;
width:42px;
height:20px;
padding-top:2px;
position:absolute;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Fiddle: http://jsfiddle.net/wzhwtvmt/

Answer 1

What you want to do is put a container around your buttonyear divs that will center everything appropriately. I've created a fiddle for you with what I think you want. You'll have to modify it to your needs, but it centers all of your buttons within the container. Use your media queries to break them up at the right sizes.
http://jsfiddle.net/vtgw5zfg/
I had some time on my hands, and messed with your code a bit. Here's an updated version that centers things horizontally and vertically based on size. It also uses a bit of JavaScript and jQuery to center your span's. It's not perfect, but should help get you started.
http://jsfiddle.net/vtgw5zfg/1/