Photoshop Question posted in
The official user guide can be found here.

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

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://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>
Tags:

3

Answers


  1. 0

    If you wish to use Bootstrap you can use bootstrap panel .

     <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
     
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
        <img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
        </div>
        <div class="panel-footer">Title 1</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
        <img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
        </div>
        <div class="panel-footer">Title 2</div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
        <img src="https://www.pushpraj.com/images/cool-scenery.jpg" class="img-rounded" alt="error" width="384" height="236">
        </div>
        <div class="panel-footer">Title 3</div>
      </div>
    </div>
    
    </body>
    </html>
    Login or Signup to reply.
  2. 0

    Because your images are inline-block, you need to put text-align: center on the parent (the <div>).

    Alternatively:
    You could also make your images display: block

    Or using flexbox:
    Make your <div> display: flex; flex-direction: column and your image width: auto;

    Login or Signup to reply.
  3. 0

    You can use floats to align blocks with images and text horizontally and text-align to align images and text inside them.

    Overflow hidden inside section clears floats inside them, in case you’d want to have background on it and it wouldn’t display properly. 

    .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;
}

section {
    overflow: hidden;
}

section > div {
    text-align: center;
    float: left;
    width: 25%; /* 1/logos in row */
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search