CODEWITHSUNDEEP
htmlcss
Ananda Vj
Ananda Vj

Reputation: 181

Center a div search bar within navbar

I'm confused how to center vertically a search bar div area, I've used margin auto and it didn't worked. Here's the full code

.search{
float: right;
width: 200px;
padding: 15px 15px;
margin: auto 0;
background-color: green;
}

Here's the problem How do I vertical center the search bar div within the navbar?

Upvotes: 0

Views: 46

Answers (1)

doğukan
doğukan

Reputation: 27559

I made with flexbox. You should learn flexbox

body{
	font-family: sans-serif;
	margin: 0;
	padding: 0;
}
.navbar{
	background-color: #343D46;
	position: absolute;
	width: 100%;
	text-align: center;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.navbar a{
	display: inline-block;
	float: left;
	font-size: 19px;
	text-decoration: none;
	padding: 15px 15px;
}
.navbar a:hover{
	background-color: green;
}
.dropdown{

}
.search{
	float: right;
	width: 200px;
	padding: 15px 15px;
	margin: auto 0;
	background-color: green;
}
.search input{
	float: right;
	border: none;
	outline: none;
	background: none;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="navbar">
    <div>
      <a href="#">Lorem</a>
      <a href="#">Ipsum</a>
      <a href="#">Dolor</a>
    </div>
		<div class="dropdown">
			
		</div>
		<div class="search">
			<input type="text" name="search" placeholder="search">
		</div>
	</div>
</body>
</html>

Upvotes: 1

Related Questions