#artiststhumbnail a img {
display:block;
margin:auto;
}
Here’s my solution in: http://jsfiddle.net/marvo/3k3CC/2/
CSS flexbox can do it with justify-content: center on the image parent element. To preserve the aspect ratio of the image, add align-self: flex-start; to it.
HTML
CSS
.image-container {
display: flex;
justify-content: center;
}
Output:
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}