Html Question posted in
Some basic documentation can be found here.

Html – CSS problem with aligning element under another other

Having problem with aligning a search bar under an image.It somehow sticks to a left side of a screen. I’m a newbie to web developing. I tried display: flex and margin methods. https://i.sstatic.net/TMhxgNcJ.png, https://i.sstatic.net/oJs9iR0A.png, https://i.sstatic.net/HlNHDMFO.png.

I expected it to work.

Please help me.

Tags:

2

Answers


  1. 0

    Try putting both the image and the search bar inside the same div, then use

    div{
  display: flex;
  flex-direction: column;
  align-items: center;
}
    Login or Signup to reply.
  2. 0

    I adjusted the body’s width and height to 100% and applied flex to it. This ensures that the form, being within the body, aligns correctly. I also made some fixes to the HTML attributes, and adjusted the logo’s dimensions while removing the background, so everything should work well now.
    more about flex-box

    index.html:

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

<head>
    <meta charset="UTF-8">
    <link href="./style.css" rel="stylesheet">
    <title>Yandex</title>
</head>

<body>
    <div class="container">
        <a href="#" class="search">
            <img src="https://i.sstatic.net/IxYc66aW.png" alt="Yandex Logo">
        </a>
    </div>

    <div class="main search">
        <form id="search" class="search-form" name="q" method="get" action="">
            <p id="input">
                <input name="q" id="search_input" type="search" title="Search" placeholder="Search anything" autofocus required />
            </p>
        </form>
    </div>
</body>

</html>

style.css

*{
    margin: 0;
}
body{
    font-family: "Poppins", sans-serif;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container {
    width: 500px;
    height: 250px;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search