How can I align logos horizontally with the respective text underneath the logos?
<p>I am trying to align logos horizontally with the respective text underneath them so they look nice and in order. Currently, they are just vertical. I have searched this site and many others, and tried different solutions but nothing seems to work. Here is my code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.intro-text {
 color: #000000;
    display: block;
    width: 100%;
    margin: 50px 0 0 0;
    text-align: justify;
    line-height: 1.8em;
}

.intro-text-3d {
 color: #000000;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.8em;
}

.intro-text-process {
 color: #000000;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.8em;
}

.intro-text-toolset {
 color: #000000;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.8em;
}

/** Logos **/

.logos-all {
 display: block;
 text-align: center;
 margin: 0 auto;
}

img {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
    border: 0;
    line-height: 50px;
    max-width: 100%;
    width: 5%;
    height: auto;
    margin-bottom: .95em;
}

strong {
    display: block;
    font-weight: 700;
    text-align: center;
}

section h4 {
 text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article&gt;
            &lt;section&gt;
                &lt;p class="intro-text"&gt;
                  Some text goes here.
                 &lt;/p&gt;&lt;/div&gt;
                    &lt;div&gt;
                     &lt;img src="http://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/&gt;
                        &lt;strong&gt;CSS3&lt;/strong&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                     &lt;img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/&gt;
                        &lt;strong&gt;Javascript&lt;/strong&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                     &lt;img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/&gt;
                        &lt;strong&gt;Wordpress&lt;/strong&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                     &lt;img src="http://lorempixel.com/80/79" alt="PhP" height="80" width="79"/&gt;
                        &lt;strong&gt;PhP&lt;/strong&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;/section&gt;
                &lt;section&gt;
                &lt;p class="intro-text-3d"&gt;
                 Some text goes here
                &lt;/p&gt;
                &lt;div class="logos-all"&gt;
                   &lt;div&gt;
                    &lt;img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/&gt;
                       &lt;strong&gt;3DS MAX&lt;/strong&gt;
                   &lt;/div&gt;
                   &lt;div&gt;
                    &lt;img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/&gt;
                       &lt;strong&gt;Cinema 4D&lt;/strong&gt;
                   &lt;/div&gt;
                   &lt;div&gt;
                    &lt;img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/&gt;
                       &lt;strong&gt;Blender&lt;/strong&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
                &lt;/section&gt;
            &lt;section&gt;
                &lt;h4&gt;How the process works&lt;/h4&gt;
                &lt;p class="intro-text-process"&gt;Some text goes here  &lt;/p&gt;
            &lt;/section&gt;
            &lt;section&gt;
             &lt;h4&gt;Design Toolset&lt;/h4&gt;
                &lt;p class="intro-text-toolset"&gt;Some text goes here.&lt;/p&gt;
                &lt;div class="logos-all"&gt;
                &lt;div&gt;
                 &lt;img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/&gt;
                    &lt;strong&gt;Photoshop&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div&gt;
                 &lt;img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/&gt;
                    &lt;strong&gt;Illustrator&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div&gt;
                 &lt;img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/&gt;
                    &lt;strong&gt;Gimp&lt;/strong&gt;
                &lt;/div&gt;
                &lt;div&gt;
                 &lt;img src="img/inkscape-logo.png" alt="Inkscape"/&gt;
                    &lt;strong&gt;Inkscape&lt;/strong&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;/article&gt;
            &lt;/section&gt;</code></pre>
</div>
</div>
</p>