asked on

How to vertical center content in a div

Hello,
How do I center content in a div...

Here a plunk to my code ,,,

http://plnkr.co/edit/u0A9Zuiwn6G6zPtQNyOh?p=preview

<div class= "container" >
	<nav class = "navbar navbar-fixed-top">
		<div class="row searchResulNavBar" style="background:grey">
			<span class="glyphicon glyphicon-chevron-left pull-left" aria-hidden="true"></span>
		 	<span class="glyphicon glyphicon-filter  pull-right" aria-hidden="true"></span>
		 	<div class="text-center ">Search Result</div>
		 </div>
		
	</nav>
</div>

Open in new window

.searchResulNavBar
{
	background-color:#2175d9;
	padding-left:2em;
	padding-right:2em;
	height:2.5em;
	color:white;
}

Open in new window

Thanks for the help

Scott Fell

Make the height and line height the same
http://jsbin.com/bovuco/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>padas</title>
  <style>
  .searchResulNavBar
{
	background-color:#2175d9;
	padding-left:2em;
	padding-right:2em;
	height:2.5em;
    line-height:2.5em;
	color:white;
     
}
 
  </style>
</head>
<body>
<div class= "container" >
	<nav class = "navbar navbar-fixed-top">
		<div class="row searchResulNavBar" style="background:grey">
			<span class="glyphicon glyphicon-chevron-left pull-left" aria-hidden="true"></span>
		 	<span class="glyphicon glyphicon-filter  pull-right" aria-hidden="true"></span>
		 	<div class="text-center ">Search Result</div>
		 </div>
		
	</nav>
</div>

</body>
</html>

Open in new window

chand pb

ASKER

Thanks but the icon are not centered .. only the text is centered

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chand pb

ASKER

Thank you