Centered content appears smaller than the surrounding div

After spending an hour trying to troubleshoot and searching for solutions, I am turning here for help.

I am attempting to insert a Bootstrap Nav-Bar into a Div. I successfully centered the Nav-Bar, but now my Div is taller than the content inside it. This issue only arises when the Nav-Bar is centered. If I let it float left, the extra space below the Nav-Bar disappears.

I believe the problem lies within this block of code:

ul{     
    display: inline-block;
}

This is what I currently have implemented.

The menu is centered but there is too much space below it

This is what I am aiming for, perfectly centered:

No extra space below but still centered

Any assistance would be greatly appreciated :)

htmlcsstwitter-bootstrap

Answer №2

One solution could be increasing the height of the header: #header {height:50px;}

http://example.com

Answer №4

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

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

This code snippet will help you center your text and automatically calculate the width of your list items.

Answer №5

I noticed a few improvements that could be made to 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

The reason for using *display: inline;zoom: 1 is to ensure compatibility with IE7 browser as it does not support display: 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

Tips for creating a custom Angular Material modal window that is fully responsive to its parent modal window

Hey there! I've put together a custom modal window in Angular Material by combining the custom modal window example with the Angular Material slider demo. Everything is working well except for the fact that the sliders inside the modal window are not ...

javascriptcssangularjsangular-material

Enhance CSS delivery for the items listed below

Reduce the delay caused by rendering JavaScript and CSS above-the-fold. There are 16 CSS resources currently blocking the rendering of your page. This delay could be affecting the loading time of your content. To improve this issue, consider deferring or ...

javascriptphpjqueryhtmlcss

embedding an Image onto a webpage without requiring a source

How can I incorporate an image into my HTML page and then send it via fax without using the "src" attribute? Any suggestions on converting the image to a byte array and embedding it in the html document? ...

html

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

Please input only 0s and 1s into the designated field

How can I modify this code to only accept 0 and 1 in the input field, while also adding spaces after every 4 digits? Currently, it accepts all digits. I'm struggling with creating a pattern that restricts it to just 0 and 1. document.getElementById(&a ...

javascripthtmljquery

How to Retrieve the Following Element in a Table Using Javascript

https://jsfiddle.net/en6jh7pa/1/ I am encountering an issue with accessing the next element, as it is returning null. When I pass "this" as the onclick parameter, I expect to be able to grab the next element using this keyword. However, it seems to be re ...

javascripthtml

Change background according to URL query

My goal is to dynamically change background images based on a URL parameter, specifically the destination code. With numerous background images available, it's crucial to display the correct one depending on the URL string. For instance, if the URL re ...

javascriptjquerycssimage

What are the reasons for the various methods available for importing my JS code?

Here is the structure of my folders: --public ----frontend.js --views ----fontend.ejs The frontend.js file is located inside the public folder, while the frontend.ejs file is in the views folder. In my HTML / EJS file, I included the JavaScript (fronten ...

javascripthtmlnode.jsejs

Slider text in Master not adjusting properly for mobile devices

I am at my wits' end trying different solutions to make this work properly. The text on the slider of my homepage appears jumbled up when viewed on a mobile device. I suspect it might be related to responsive design? Could someone please take a look ...

htmlcsswordpressmobilemasterslider

Modifying Stroke color in HTML5 Canvas

I am attempting to create a unique visual effect by drawing a circle resembling a clock using canvas 2d context. The idea is to initially draw the circle in black starting at point p1, and then when I complete a full circle tour it should erase as the colo ...

javascripthtmlcanvasgraphics

How can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

Displaying cards horizontally on desktop and vertically on mobile using CSS

Context and Issue I am currently working on this specific page, with a focus on the "Top Artists" section. Desired Outcome: When viewed from a laptop, I aim for the cards to be displayed as vertical rectangles, where the ranking is at the top, followe ...

htmlcss

Instructions for sending an email through a form while displaying a pop-up message

My Objective To create a functionality on my website where users can input their email addresses in a form and receive a validation popup indicating whether the email is valid or not. Background Information I am currently working on a website that allow ...

javascriptphpjqueryhtmlemail

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Employing plain Javascript (without the use of jQuery) to concatenate information from two JSON strings - encountering an error due to the absence of

Having a JSON stringified form data like this: {"name":"jack miller", "address":"123 main st"} I aimed to append more records but encountered an error saying "append is not a function." The desired outcome is to have both sets of records in this format: ...

javascripthtmljsonreactjsforms

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

javascripthtmlcss

display a container and navigate to the specific link

Greetings! Could someone please help me make this code function properly? I am attempting to display the DIV (slidingDiv) and navigate to the selected ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... However, the code currently only allows me to go to the ...

javascriptjqueryhtmlanchor

What is the best way to use CSS in conjunction with a Master Page and a new content page, ensuring that the new CSS does not interfere with

Currently, I am working with an ASP.Net 4.5 website that incorporates a master page. The site utilizes a CSS file that is applied universally across all pages. Recently, I added a new page to the website which contains its own custom CSS specifically desig ...

htmlcssasp.netmaster-pagesactivereports

A step-by-step guide on making an animation series with html and css keyframes

I've been working on creating a captivating animation using HTML and CSS keyframes, but I seem to have hit a roadblock. Despite trying different rotations and transforms, I can't seem to achieve the desired effect depicted in the image below. The ...

htmlcss

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation