CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kjarudi
Kjarudi

Reputation: 15

Div bigger then Content after centering

After 1 hour of try and error and searching for problems like this, i try to get an answer here.

I want to include a bootstrap Nav-Bar into a Div. I centered the Nav-Bar, but now my Div is higher then the content. This problem is only available when the Nav-Bar is centered. If i let it float left, the space below the Nav-Bar isnt there.

i think it has something to do with the

ul{     
    display: inline-block;
}

Thats what i have.

Menu centered but to much space below

Thats what i want, just centered:

No space below but centered left

hope you can help me :)

Upvotes: 0

Views: 65

Answers (5)

Sai Deepak
Sai Deepak

Reputation: 688

I have made a simple corrections in your code.

.nav-pills
{
  text-align: center;
}
.nav-pills li
 {
   display: inline-block;
   *display: inline;zoom: 1;
   vertical-align: middle;
   float: none;
 }

*display: inline;zoom: 1

is used because to even apply for IE7 browser because IE7 does not support display: inline-block

Upvotes: 0

Roy Sonasish
Roy Sonasish

Reputation: 4599

use vertical-align: top; in .nav hope this will solve your issue

updated working code

Upvotes: 1

Patiphan Mahamat
Patiphan Mahamat

Reputation: 1

nav ul {
  display: table;
  margin: 0 auto;
  width: /* Set your width here */
}

nav ul li {
  display: table-row;
  text-align: center;
}

This should center your text and make your li width being automaticly calculated

Upvotes: 0

gopalraju
gopalraju

Reputation: 2309

Try this: http://jsfiddle.net/m28mzk11/1/

.nav-pills{
  display:table;
  margin:0 auto;
}

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

try adding height to the header: #header {height:50px;}

http://codepen.io/anon/pen/KpvJRo

Upvotes: 0

Related Questions