Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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

Hip
 Share

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

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

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


×