How to position images (with text underneath) on one row?

Question

How can I position 11 images (with text underneath each) in the same row? Here's a slightly simplified version of my existing code:

.a {
    height: 90px;
    width: 90px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1s;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;
    
-moz-animation-direction: normal;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1s;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out; 
}

.b {
    display: block;
}

<div id="group-10" class="col-md-12">
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
    <img class="a" src="img/...png"><span class="b">A</span>
</div>

Answer 1

Wrap your elements and set the wrapper to be inline-block.

.ab {
    display: inline-block;
}
.a {
    height: 90px;
    width: 90px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1s;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;

-moz-animation-direction: normal;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1s;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out; 
}

.b {
    display: block;
}

<div id="group-10" class="col-md-12">
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
    <div class="ab">
        <img class="a" src="img/...png"/><span class="b">A</span>
    </div>
</div>

Answer 2

@StillMoJo class names cannot start with a number, add a letter in front of them, like A1, B2, etc.. Also, correct the widht to width

Answer 3

Give this a try : -

.col-md-12 {
    width: 100%;
    display: block;
}

img {
    float: left;
    height: 90px;
    width: 90px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    -webkit-animation-direction: normal;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1s;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease-in-out;

-moz-animation-direction: normal;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 1s;
    -moz-animation-name: blink;
    -moz-animation-timing-function: ease-in-out; 
}

span {
   float: left; 
}

Your class names are causing the problem 1 and 2. I would advise using a different class name for the img and span.