CODEWITHSUNDEEP
htmlcsssearchbar
Cyberiavisor
Cyberiavisor

Reputation: 55

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

Upvotes: 0

Views: 366

Answers (1)

Kishor Mandve
Kishor Mandve

Reputation: 71

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.

Upvotes: 0

Related Questions