How to horizontally and vertically align an image and a form

Question

I am trying to replicate the google homepage but I have some trouble centre aligning an image and a form, the image on the top. I have searched up a lot of websites but I don't really understand them. Can someone please help, or give me some websites or sources to look at. Here's my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Search</title>
    <meta charset="utf-8">
    <!-- This link tag is used to link html file with css file -->
    <link rel="stylesheet" href="CSS/styles.css">
</head>

<body>
    <div class="center">
        <img class="item" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
        <form class="item" action="https://google.com/search">
            <input class="item" maxlength="2048" name="q" type="text" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" autofocus role="combobox" spellcheck="false" class="center">
            <input class="item" type="submit" value="Google Search" hidden>
        </form>
    </div>

    <!-- <h1><span class="googleText">G</span><span class="googleText">o</span><span class="googleText">o</span><span class="googleText">g</span><span class="googleText">a</span><span class="googleText">l</span></h1> -->

</body>

</html>

SCSS:

@font-face {
    font-family: 'Product Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}

body {
    margin: 0 auto;
    font-family: Product Sans;
    font-size: 2vw;
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item {
    display: block;
}

$blue: #4285F4;
$red: #EA4335;
$yellow: #FBBC05;
$green: #34A853;
.googleText {
    align-items: center;
    font-size: 5vw;
    display: inline-block;
    text-align: center;
    &:nth-child(7n+1) {
        color: $blue;
    }
    &:nth-child(7n+2) {
        color: $red;
    }
    &:nth-child(7n+3) {
        color: $yellow;
    }
    &:nth-child(7n+4) {
        color: $blue;
    }
    &:nth-child(7n+5) {
        color: $green;
    }
    &:nth-child(7n+6) {
        color: $red;
    }
    &:nth-child(7n+7) {
        color: $yellow;
    }
}

The homepage:

Top scoring answer, use a flexbox and you can control the layout of the logo and the search: [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) — AStombaugh, Jun 12 '22 at 00:42

score 1 · Accepted Answer · answered Jun 12 '22 at 02:18

Hello you can see the video, This video is make google front page and other link some one say before stack overflow same question. Hope it will help you

Video [https://www.youtube.com/watch?v=ZY1MYwUDZsY][1]

Code Source [https://stackoverflow.com/questions/17536429/re-creating-google-homepage][1]

How to horizontally and vertically align an image and a form

1 Answers1