如何水平和垂直对齐图像和形式

发布于 2025-02-06 14:42:16 字数 2576 浏览 1 评论 0原文

我正在尝试复制Google主页，但是我有一些麻烦的中心在对齐图像和表单上，图像在顶部。我已经搜索了很多网站，但我并不真正了解它们。有人可以帮忙，还是给我一些网站或来源。这是我的代码：

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

主页：

原文

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: