Placing search bar at the center of the header

I have a logo positioned at the top left of my header that needs to stay fixed in place. Additionally, I want to center a search input form horizontally within the header, even when the browser window is resized. The challenge arises when trying to align the "Go" button next to the input field.

I've attempted using auto margins and other techniques without success. Below is the code snippet along with a link to a jsfiddle example.

Thank you for any assistance!

html:

<header>
  <h1 id="logo">Test Logo</h1>
  <form method="get" id="search-form">
    <input type="text" id="search" placeholder="Search Here" autocomplete="off" />
    <ul id="suggestions"></ul>
    <input type="submit" value="Go" />
  </form>
</header>

css:

body {
     font: 14px/1.5 "Open Sans", "PT Sans", "Source Sans Pro",
        "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    color: #333;
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
    font-weight: bold;
    margin-top: 0px;
}

header {
    position: relative; 
    height: 50px;
    background-color: black; 
    padding-top: 10px;
}

#logo {
    margin-bottom: 10px;
    font-weight: bold;
    margin-top: 0px;
    margin-left:20px;
    text-align:left;
    color:#ECF0F1;
    display:inline
}

#search {
    width: 350px;
    padding: 4px 8px;
    outline: none;
    display:inline;
}

#search-form input[type='submit'] {
    display:inline;
    padding: 5px 8px;
    border: 1px solid #aaa;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
    background-image: -webkit-linear-gradient(top, #eee, #ddd);
    background-image: -moz-linear-gradient(top, #eee, #ddd);
    background-image: -o-linear-gradient(top, #eee, #ddd);
    background-image: linear-gradient(to bottom, #eee, #ddd);

}

#search-form {
    position: relative;
    margin-bottom: 20px;
    display:inline;
}

http://jsfiddle.net/31zoco4c/1/

Answer №1

Take a look at the code snippet

Updated CSS styles

header {
    position: relative;
    height: 50px;
    background-color: black;
    padding-top: 10px;
    display: inline-block;
    width: 100%;
    text-align: center;
}
#logo {
    float: left;
    margin-bottom: 10px;
    font-weight: bold;
    margin-top: 0px;
    margin-left:20px;
    text-align:left;
    color:#ECF0F1;
    display:inline
}
#search-form {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
    display:inline;
}

The changes made include setting the display of the header to inline-block, using text-align:center for the header. The logo is now aligned to the left with float:left, and the searchform is centered by setting its display to inline-block.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with Bootstrap 5 dropdown menu: Functional on main page, but failing on subpages

As a beginner with Bootstrap, I recently attempted to integrate a dropdown menu into my website by following the Bootstrap documentation (version 5.1) for guidance. While the dropdown menu functions correctly on the homepage, it fails to work properly on ...

Issue with fixed sidebar on brief content

It's interesting how the sticky widget performs differently on long articles compared to short ones on my website. Here is an example of a long article where the sticky widget works well without any lag: . Now, let's take a look at a shorter art ...

Enclose every line within a span tag

I'm currently exploring ways to wrap each line of content in a span. For example, suppose I have an element structured like this: .body-copy { position: relative; width: 100%; height: auto } <div class="body-copy"> Lorem ipsum dolor s ...

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

Ways to compute in this JQuery

I'm facing an issue with jQuery in HTML. I just need to make some changes in the calculation process. Below are the codes where all results will be calculated in a single field. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/ ...

The CSS3 Border-Radius feature is showing some color bleeding on a border that is colored differently

I designed a dynamic-width container with rounded edges using border-radius, along with a bold border on one side of the container in a different color. Everything looks fine when the browser window is small, but as I expand the window size, I notice the ...

Display Bootstrap radios horizontally when the screen size is small or larger, and vertically when the screen

After reviewing the Bootstrap documentation for styling checkboxes and radios, I am searching for a solution to have my radios displayed horizontally on small screens or larger, and vertically on extra small screens. The approach described in the Bootstr ...

What is the best way to set up a React route for this specific situation?

I am in need of guidance regarding my routes setup. I want to create an Application route with the following requirements: Any user trying to access an invalid route should be redirected to the /add-user page. Users should be able to directly access the c ...

How to insert text into a text input using onKeyPress in react.js

I am looking to simulate a typing effect where the phrase 'Surveillance Capitalism' is inputted letter by letter into a text input field as a user types. However, I encounter an issue when trying to add each individual letter into the input; I re ...

To add a span within a contenteditable field, restricting the user from inputting beyond the inserted span

When the user presses the space key, I want an auto input span to appear. However, when I trace them in the devtools, range.setEnd(lasttextnode, 0); and range.collapse() seem to work correctly. The issue arises when the keyboard input is not right. I try t ...

Is there a way to move the cards to the next line within a wrapper when the screen size is reached?

My goal is to showcase multiple elements in cards, obtained from my routing system, much like how I'm setting up my sidebar (which is functioning correctly). I have all the titles and icons ready, and the linking works seamlessly. This is where I&apo ...

Another option for handling a series of conditional statements instead of a bulky

Can someone help me with a coding issue I'm facing? I have an application that contains a large number of buttons which I need to trigger using keyboard presses. Currently, I am using a switch statement for this purpose. However, as the number of butt ...

Angular 6 - applying a class when reaching a specific section

When scrolling down to a section, I want to dynamically add the class .active to an element. Currently, I have two sections where clicking on a link with href="#o-nas" takes me to the corresponding <section id="o-nas">...</section>. However, I ...

Is there a discrepancy in the display of inline-block content across various browsers?

My dilemma lies in the fact that I have a responsive form element that needs to be aligned inline with a title. Here is an example of what I'm aiming for: https://i.sstatic.net/2ckjf.png Everything looks perfect in Firefox, just as I intended. Howe ...

The responsiveness of Slick Slider's breakpoints is malfunctioning

After implementing a slider using slick slider, I encountered an issue with the width when testing it online and in a normal HTML file. If anyone could assist me in resolving this issue, I would greatly appreciate it. Please inspect the code for both scen ...

Issues with CSS in ASP.NET MVC

Calling all CSS experts! I need some guidance on applying my custom stylesheet to a project in MVC. It seems like I'm doing everything right, but nothing is changing. Here's what I have in index.html: <link rel="stylesheet" href="~/Content/m ...

Creating an HTML button that will execute JavaScript code when clicked

My goal is to create a button that, when clicked, updates the background of another div. These buttons are dynamically generated using PHP from images in a folder. <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <scr ...

Refreshing the dropdown selection to a specific option using AngularJS and either JavaScript or jQuery

Currently, I am facing an issue with resetting the select tag to its first option. I have implemented Materialize CSS for styling purposes. Despite my efforts, the code snippet below is not achieving the desired outcome. Here is the JavaScript within an ...

How can we parse the returned 'data' as HTML in JavaScript/jQuery to select more elements?

After receiving data from a webservice, it turns out that the data is just raw HTML without any XML headers or tags around it, but simply a piece of HTML code. <div class="Workorders"> <div id="woo_9142" class="Workorder"> <span ...

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

Utilizing DevExtreme widgets for the creation of a line chart in jQuery as shown below: var dataSource = [{"Date Range": "August-2018", Benelux: 194, Czech_Slovakia: 128, ...