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

Html – How do I center "search button" next to the search bar with CSS?

I’m learning programming (web development), I started yesterday, I want to specifically center the "search button" next to the search bar, but for some reason it doesn’t seem to work, may you help me, please?

Here’s an image of the problem and below my code lines.
enter image description here

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Cookies: Buy the best chocolate cookies!</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--This is the website header-->
    <h1 id="Cookieland">Cookieland</h1>
    <div>
        <form action="#">
            <input type="text" class="search-input" placeholder="Search Cookies">
            <button type="submit" class="search-button">Search</button>
        </form>
    </div>
</body>
</html>

CSS

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    background-color: wheat;
    height: 70px;
    padding: 0px;
    margin: auto;
}
body {
    background-color:black;
}
/* Styling for the search container */
.search-container {
    text-align: center;
    margin-top: 20px;
}
/* Styling for the search input */
.search-input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #ccc;
    width: 400px;
    margin: auto;
    display: block;
}
/* Styling for the search button */
.search-button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: auto;
    display: block;
}
/* Styling for the search button on hover */
.search-button:hover {
    background-color: #e0e0e0;
}
Tags:

2

Answers


  1. 0

    I checked your code, It seems like you’ve applied the display: block; property to both the search input and the search button, which causes them to stack on top of each other, taking up the full width of the container. To center them horizontally next to each other, you need to wrap them in a container and apply appropriate CSS. Like, we dont need to put margin: auto, Since we want the search input and search button to be displayed next to each other, we don’t need to center them horizontally using. The code might be like below,

    h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    background-color: wheat;
    height: 70px;
    padding: 0px;
    margin: auto;
}
body {
    background-color: black;
}
/* Styling for the search container */
.search-container {
    text-align: center;
    margin-top: 20px;
}
/* Styling for the search input */
.search-input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #ccc;
    width: 400px;
}
/* Styling for the search button */
.search-button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* Styling for the search button on hover */
.search-button:hover {
    background-color: #e0e0e0;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Cookies: Buy the best chocolate cookies!</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--This is the website header-->
    <h1 id="Cookieland">Cookieland</h1>
    <div class="search-container">
        <form action="#">
            <input type="text" class="search-input" placeholder="Search Cookies">
            <button type="submit" class="search-button">Search</button>
        </form>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Here are some changes to your code,

    HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Cookies: Buy the best chocolate cookies!</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <!--This is the website header-->
    <h1 id="Cookieland">Cookieland</h1>
    <div>
        <form class="search-container" action="#">
            <input type="text" class="search-input" placeholder="Search Cookies">
            <button type="submit" class="search-button">Search</button>
        </form>
    </div>
</body>
</html>

    CSS

    h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: black;
    text-align: center;
    background-color: wheat;
    height: 70px;
    padding: 0px;
    margin: auto;
}
body {
    background-color:black;
}
/* Styling for the search container */
.search-container {
    text-align: center;
    margin-top: 20px;
}
/* Styling for the search input */
.search-input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #ccc;
    width: 400px;
    margin: auto;
    display: inline-block;
}
/* Styling for the search button */
.search-button {
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid #ccc;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: auto;
    display: inline-block;
}
/* Styling for the search button on hover */
.search-button:hover {
    background-color: #e0e0e0;
}

    For below output,
    enter image description here

    Just made changes to the display property of input and button tag to inline-block and added this search-container existing class to form tag

    Hope that would help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search