I am using [masonry](http://masonry.desandro.com/) to place my images nicely on a large screen like this:

```
 <div class="grid"  >
    <div class="grid-item"><img class='link img-link' src="images/image1.gif"></div>
    <div class="grid-item"><img class='link img-link' src="images/image2.gif"></div>
    <div class="grid-item"><img class='link img-link' src="images/image3.gif"></div>
  </div>

```

and the following jQuery snipped

```
$(document).ready(function(){
      $('.grid').masonry({
        columnWidth: 1,
        itemSelector: '.grid-item'
      });
});

```

However nice placing is not necessary when using a mobile phone.
Currently, on a mobile screen the images are not centered but all left aligned. Setting `text-align:center` to `grid` or `grid-item` does not help.
**How can I center the images when they are all listed underneath?** 

The problem can be seen at <http://www.kristianhammerstad.com/>

[![enter image description here](https://i.stack.imgur.com/VvvF4.jpg)](https://i.stack.imgur.com/VvvF4.jpg)

This is how it looks in my case:

[![enter image description here](https://i.stack.imgur.com/tYIJv.jpg)](https://i.stack.imgur.com/tYIJv.jpg)