How to center pictures in span?

Question

I want to center picutes in a span. The span has the class centerMe but it doesn't affect the pictures.

Markup of centerMe:

.region.region-footer .centerMe{
    text-align: center;
  }

You can find this example on JSFiddle.

Thanks for any help

Answer 1

It is not happening because span is an inline element.

text-align:center does not affect it because total width of images and width of span is exactly same. If you give it 100% width, then only you will see the difference.

Also, width property will not work on inline element so change it to block or inline-block.

Add width to the markup:

.centerMe {
    width:100%;
    display:inline-block;
}

Updated fiddle here.

Another solution is to use any block element like div,p or section rather than using span.