How to align search bar in center of nav bar

Question

In this below given code, I am trying to align search box in center of navbar but it doesn't work. How I align search bar in center of navbar:

#navbar {
  width: 100%;
  height: 50px;
  background-color: aqua;
}

a {
  text-decoration: none;
  color: black;
  font-size: 1.3em;
}

#search {
  display: inline-block;
  margin: 0 auto;
}

#faviorites {
  float: right;
}

<nav id="navbar">
  <a id="home" href="/">Home</a>
  <input type="text" id="search" placeholder="Search Here">
  <a href="fav.html" id="faviorites">Faviorites</a>
</nav>

@Amaresh S M answer is not accurate. it stretches the search bar. Also there's no need to have floats when flexbox is used. I have cleaned up your css and added a better solution and example Fiddle. — Becky, Sep 24 '20 at 07:12

Amaresh S M · Accepted Answer · 2020-09-24T07:19:48.623

1

Just add display:flex; to #navbar.

#navbar {
  width: 100%;
  height: 50px;
  display:flex;
  background-color: aqua;
}

a {
  text-decoration: none;
  color: black;
  font-size: 1.3em;
}

#search {
  display: inline-block;
  margin: 0 auto;
}

#faviorites {
  float: right;
}

<nav id="navbar">
  <a id="home" href="/">Home</a>
  <input type="text" id="search" placeholder="Search Here">
  <a href="fav.html" id="faviorites">Faviorites</a>
</nav>

if you want to center both horizontally and vertically use:

#navbar {
  width: 100%;
  height: 50px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: aqua;
}

edited Sep 24 '20 at 07:19

answered Sep 24 '20 at 06:51

Amaresh S M

2,936
2
13
25

please don't add irrelevant tag to the question. Using flexbox as a solution doesn't make the question related to flexbox – Temani Afif Sep 25 '20 at 08:40
okay @TemaniAfif – Amaresh S M Sep 25 '20 at 11:52

score 0 · Answer 2 · answered Sep 24 '20 at 06:52

Easiest way is to use a flexbox and define space-between for horizontal spacing.

#navbar {
  width: 100%;
  height: 50px;
  background-color: aqua;
  display: flex;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: black;
  font-size: 1.3em;
}

<nav id="navbar">
  <a id="home" href="/">Home</a>
  <input type="text" id="search" placeholder="Search Here">
  <a href="fav.html" id="faviorites">Faviorites</a>
</nav>

Becky · Answer 3 · 2020-09-24T07:16:37.633

0

You can do it easily using flexbox

Add these 3 to your #navbar and that's all needed.

#navbar {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   /*your current styles*/
}

jsFiddle

edited Sep 24 '20 at 07:16

answered Sep 24 '20 at 07:08

Becky

5,467
9
40
73

How to align search bar in center of nav bar

3 Answers3