Jump to content
Please Use CODE Tags

HTML/CSS - How can I place two pictures next to each other and center them?

Hip
By Hip
in Programming
 Share
Posted

Hey guys,

 

So I want to place a twitter and instagram logo next to each other below the logo banner of the website.

Somehow though the instagram logo ist way bigger than the twitter one.

Maybe you can explain me what my mistake is here.

I want to both to be centered right below the logo. At best starting floating left right where the logo begins.

Thank you in advance!

  

<!DOCTYPE html>
<html>
    <head>
        <title>Website</title>
        <link rel="stylesheet" href="../CSS/stylesheet.css">

      

    </head>
    
    <body>
        <header>
            <div class="logo-banner">
            </div>
            <div class="social_media-banner">
                <div id="twitter-logo">
                    <img src="../IMG/twitter_logo_white.svg" alt="Twitter-Logo">
                    
                </div>
                <div id="instagram-logo">
                    <img src="../IMG/insta_glyph_logo_white.svg" alt="Instagram-Logo">
                </div>
            </div>
        </header>
    </body>
</html>

  

html
{
    background: black;
}

.logo-banner
{
    width: 100%;
    margin: 15% 0 0 auto;
    background-image: url(../IMG/logo_square.svg);
    height: 5em;
    background-repeat: no-repeat;
    background-position: center;
}

.social_media-banner
{
    float: left;
    width: 50%;
    padding: 5px;
}

#twitter-logo
{
    margin: 0 auto;
    height: 2em;
    width: 2em;
    display: inline-block;
}

#instagram-logo
{
    margin: 0 auto;
    height: 2em;
    width: 2em;
    display: inline-block;
}

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

When you want to layout a page you need to divide it into sections in the design. A table is hated in html for good reason, but flexbox is basically a table layout that allows for responsive elements. 

 

Effectively you need to create a container to hold your elements, then add rows and columns that allow you to align elements. This w3schools page tells you how to do it.

 

https://www.w3schools.com/howto/howto_css_images_side_by_side.asp

Link to comment
Share on other sites
Link to post
Share on other sites
  • 4 months later...
Posted

don't use img tags.

make the images the same way you do the banner background. 

i dont fully understand what you mean by "center them right below the banner"

 

here's an example of two differently sized square images scaled to 2rem by 2rem sitting next to each other if it helps: 

<!DOCTYPE html>

<head>
  <style>
    #container {
      display: grid;
      grid-template-rows: 2em;
      grid-template-columns: 2em 2em;
      grid-gap: .3rem;
    }

    #container>div {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="centered-image" style="background-image: url('https://www.fillmurray.com/200/200')"></div>
    <div class="centered-image" style="background-image: url('https://www.fillmurray.com/800/800')"></div>
  </div>
</body>

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×