CSS Aligning Images Along Side Text

Question

This question has probably been asked a million times; however, I can't seem to find an answer to my issue.

I have a footer that contains aligned copyright text and I am trying to add 3 logos to the right of it (without a line break). Once the screen is too small to contain the copyright and the logos, I want to move the logos below the copyright.

<footer>

        <div class="legal">
            <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
            <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

            <p>
                Trademark text
            </p>

            <br />
            <p>
                Copyright text
            </p>
        </div>

        <div class="logos">
            <a href="#" target="_blank">
            <img src="logo1.png" />
            </a>

            <a href="#" target="_blank">
                <img src="logo2.png" />
            </a>
            <a href="#" target="_blank">
                <img src="logo3.png" />
            </a>       
        </div>

</footer>

I tried wrapping the copyrights and the logos in two separate divs and using float: left and right but failed. Since I need my copyright text to be aligned in the middle of the footer as shown above.

Any guidance would be greatly appreciated.

davecar21 · Accepted Answer · 2018-02-19 00:58:49Z

There are ways on how you want to achieve what you wanted.

Once the screen is too small to contain the copyright and the logos, I want to move the logos below the copyright.

You will need to use CSS Media rule to achieve that.

You can try using CSS Flexbox.

footer{
  width:100%;
  display:flex;
  flex-flow: row wrap;
  align-items:center;
}

.legal{
  width:80%;
  text-align:center;
}

.logos{
  width:20%;
  text-align:right;
}

@media screen and (max-width:800px){
  .legal{
   width:100%; 
  }
  .logos{
   width:100%;
   text-align:center;
  }
}

<footer>
  <div class="legal">
    <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
    <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

    <p>
      Trademark text
    </p>
    <p>
      Copyright text
    </p>
  </div>

  <div class="logos">
    <a href="#" target="_blank">
      <img src="logo1.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo2.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo3.png" />
    </a>       
  </div>
</footer>

You can try using CSS Grid.

footer{
  width:100%;
  display:grid;
  grid-template-rows: 1fr;
  grid-template-columns: 80% 1fr;
  align-items: center;
}

.legal{
  text-align:center;
}

.logos{
  justify-self: end;
}

@media screen and (max-width: 800px){
  footer{
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
  }
  .logos{
  justify-self: center;
  }
}

<footer>
  <div class="legal">
    <a href="#" target="_blank"><B>PRIVACY NOTICE</B></a> |
    <a href="#" target="_blank"><B>LEGAL NOTICE</B></a>

    <p>
      Trademark text
    </p>
    <p>
      Copyright text
    </p>
  </div>

  <div class="logos">
    <a href="#" target="_blank">
      <img src="logo1.png" />
    </a>

    <a href="#" target="_blank">
      <img src="logo2.png" />
    </a>
    <a href="#" target="_blank">
      <img src="logo3.png" />
    </a>       
  </div>
</footer>

For more info about Grid and Flexbox. Please see this links CSS Flexbox | CSS Grid

Also please see this link for Media Rule | CSS Media Rule

Hope this helps

Collectives™ on Stack Overflow

CSS Aligning Images Along Side Text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest