html - 如何将 Logo 与 Logo 下方的相应文本水平对齐？

Question

我试图将 Logo 与其下方的相应文本水平对齐，以便它们看起来美观且有序。目前，它们只是垂直的。我搜索了这个网站和许多其他网站，并尝试了不同的解决方案，但似乎没有任何效果。这是我的代码。

.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://lorempixel.com/80/79" alt="CSS3" height="80" width="79"/>
                        <strong>CSS3</strong>
                    </div>
                    <div>
                     <img src="http://lorempixel.com/80/79" alt="Javascript" height="80" width="79"/>
                        <strong>Javascript</strong>
                    </div>
                    <div>
                     <img src="http://lorempixel.com/80/79" alt="Wordpress" height="80" width="79"/>
                        <strong>Wordpress</strong>
                    </div>
                    <div>
                     <img src="http://lorempixel.com/80/79" 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>

Answer 1

因为你的图像是行内 block ，你需要把text-align: center在 parent 身上(<div>)。

或者:你也可以制作你的图片display: block

或者使用 flexbox:让你的<div> display: flex; flex-direction: column和你的形象 width: auto;