mardi 9 août 2016

How can I align logos horizontally with the respective text underneath the logos?

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.

.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;
}
<article>
            <section>
                <p class="intro-text">
                  Some text goes here.
                 </p></div>
                    <div>
                     <img src="http://ift.tt/2aJbdUY" alt="CSS3" height="80" width="79"/>
                        <strong>CSS3</strong>
                    </div>
                    <div>
                     <img src="http://ift.tt/2aJbdUY" alt="Javascript" height="80" width="79"/>
                        <strong>Javascript</strong>
                    </div>
                    <div>
                     <img src="http://ift.tt/2aJbdUY" alt="Wordpress" height="80" width="79"/>
                        <strong>Wordpress</strong>
                    </div>
                    <div>
                     <img src="http://ift.tt/2aJbdUY" alt="PhP" height="80" width="79"/>
                        <strong>PhP</strong>
                    </div>
                </div>
                </section>
                <section>
                <p class="intro-text-3d">
                 Some text goes here
                </p>
                <div class="logos-all">
                   <div>
                    <img src="img/3ds max-logo.png" alt="3ds Max" height="80" width="79"/>
                       <strong>3DS MAX</strong>
                   </div>
                   <div>
                    <img src="img/c4d-logo.png" alt="Cinema 4D" height="80" width="79"/>
                       <strong>Cinema 4D</strong>
                   </div>
                   <div>
                    <img src="img/blender-logo.png" alt="Blender 3D" height="80" width="79"/>
                       <strong>Blender</strong>
                   </div>
                </div>
                </section>
            <section>
                <h4>How the process works</h4>
                <p class="intro-text-process">Some text goes here  </p>
            </section>
            <section>
             <h4>Design Toolset</h4>
                <p class="intro-text-toolset">Some text goes here.</p>
                <div class="logos-all">
                <div>
                 <img src="img/photoshop-logo.png" alt="Photoshop" height="80" width="79"/>
                    <strong>Photoshop</strong>
                </div>
                <div>
                 <img src="img/illustrator-logo.png" alt="Illustrator" height="80" width="79"/>
                    <strong>Illustrator</strong>
                </div>
                <div>
                 <img src="img/gimp-logo.png" alt="Gimp" height="80" width="79"/>
                    <strong>Gimp</strong>
                </div>
                <div>
                 <img src="img/inkscape-logo.png" alt="Inkscape"/>
                    <strong>Inkscape</strong>
                </div>
                </div>
                </article>
            </section>

Aucun commentaire:

Enregistrer un commentaire