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