Tips for centering a horizontal unordered list within a division element

I can't seem to figure out why the text-align center isn't working. I've followed other tutorials and applied the textalign: center to the div, then added display: inline to the ul.

Below is a sample of my HTML code from the browser as I am working on a WordPress theme:

#footer-nav.collapse.navbar-collapse {
  text-align: center;
  font-size: 16px;
  color: #383434;
  margin-top: 30px;
  margin-bottom: 30px
}
div#footer-nav ul#menu-footer {
  display: inline-block;
}
ul#menu-footer li {
  padding: 0px 15px 0px 15px;
}
<div id="footer-nav" class="collapse navbar-collapse">
  <ul id="menu-footer" class="nav navbar-nav">
    <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a title="About" href="http://localhost/eat-sleep-kayak-wp/about/">About</a>
    </li>
    <li id="menu-item-366" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-305 current_page_item current_page_parent menu-item-366 active"><a title="Blog" href="http://localhost/eat-sleep-kayak-wp/blog/">Blog</a>
    </li>
    <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a title="Newsletter" href="http://localhost/eat-sleep-kayak-wp/newsletter/">Newsletter</a>
    </li>
    <li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-365"><a title="Advertise" href="http://localhost/eat-sleep-kayak-wp/advertise/">Advertise</a>
    </li>
    <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a title="Contact" href="http://localhost/eat-sleep-kayak-wp/contact/">Contact</a>
    </li>
  </ul>
</div>

htmlcsswordpresstwitter-bootstrap

Answer №1

It appears that you are utilizing Bootstrap for your web design; the default CSS of bootstrap sets the navbar to float, which means the inline-block property won't work as intended.

Here is the default CSS code:

.navbar-nav {
    float: left;
    margin: 0px;
}

To address this issue, you can add the following code to your existing code:

div#footer-nav ul#menu-footer {
    display: inline-block;
    float:none;
}

Check out the BootplyDemo for demonstration.

Answer №2

I have implemented CSS Flex in my project. If you are interested, feel free to check out the codepen link for more details.

#footer-nav.collapse.navbar-collapse {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
    flex-direction: row;
  justify-content: center; // This will centrally align the ul
  font-size: 16px;
  color: #383434;
  margin-top: 30px;
  margin-bottom: 30px;
}

div#footer-nav > ul#menu-footer {
    display: inline-block;
}

ul#menu-footer li {
  padding: 0px 15px 0px 15px;
}

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

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

I inherited a project at my current company and one of the tasks involves allowing users to paste multiple ISBN numbers from Excel into a search field on my Index page (HTML). Sometimes, the ISBNs are poorly formatted with letters or special symbols mixed ...

htmlasp.net-core.net-coreasp.net-core-mvc

Unable to load CSS styles from SCSS when rendering the view

I am having trouble loading styles on my webpage from SCSS. Below is the code from my Gulp.js file: // Compile and Automatically Prefix Stylesheets gulp.task('styles', function () { return gulp.src([ 'Content/styles/**/*.scss&apo ...

cssangularjsgulp

Attempting to prevent the use of the <p> tag solely before the text

My toggle function is not working correctly in my FaQ section. When a user clicks on a topic, the bottom section should appear, but the <p> tag is being displayed across the entire line instead of just one word.. Here is an image to help illustrate ...

javascriptjqueryhtmlcss

Using Python with Selenium, attempt to click on a button designated as type="button"

I've been trying to click on a button in this Airbnb listing but none of the codes I tried seem to work. Here is one example of the HTML code: <li data-id="page-2" class="_1eqazlr"> <button type="button" class="_1ip5u88" aria-label="Page 2 ...

htmlpython-3.xselenium

Obtain the row ID from a database by selecting checkboxes

I am facing a challenge when trying to remove a row from my MS Access database using checkboxes on my JSP page. Each row in the displayed database has a checkbox, but I am struggling to retrieve the rowId and link each checkbox with its respective row. Any ...

javascripthtmljspcheckbox

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

javascriptjqueryhtmljson

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

javascripthtmlresizewidthrow

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

cssbootstrap-4sasscustomization

HTML5 - Pictograms and Visual Elements

I'm having an issue with Font Awesome displaying a symbol as a box instead of what I want. Can anyone provide assistance? Thank you <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Home< ...

htmlcssfont-awesome

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

javascriptcsstypescriptmaterial-uiemotion

Unusual behavior exhibited by dynamic code in iframe

When trying to retrieve a dynamic height iframe, I implement the code below. In the <head> area <script language="javascript" type="text/javascript"> function adjustIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight ...

javascriptjqueryhtmlcssiframe

Customize cell options in a dynamic grid within a dojo environment

When I double click on a cell in a data grid, I want to display a dropdown with information from a dojo store. However, the code I am using is not working as intended. I need to show clinician IDs stored in "clinStore" in the 'clinicianId' field ...

javajavascripthtmljspdojo

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

cssflexboxmaterial-ui

Ways to have a list component smoothly descend when a dropdown menu is activated

I have a situation where I have a list with two buttons, and each button triggers the same dropdown content in a sidebar component. The issue is that when I click on one button to open the dropdown, the second button does not move down to make space for it ...

javascripthtmlcssreactjs

Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

Could use some assistance with converting HTML into a PDF report. In particular, I want the footer to always appear at the bottom of the last page, even if there is minimal content on that page. Any suggestions? I've been utilizing the wkhtmltopdf to ...

javascripthtmlcssangularwkhtmltopdf

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

javascriptjqueryhtmlcsshref

Overrides of variables are not always complete

After setting up my project with npm install to utilize sass overrides, I encountered an issue. Despite adjusting the $theme-colors, only part of the page reflects the change. https://i.sstatic.net/xjrsx.png I attempted the following: $theme-colors: ("p ...

csssassbootstrap-4

Unable to make changes to the data

Journey Route::resource('/videofile', 'VideoController'); VideoController public function update(Request $req, $id){ $video = Video::findOrFail($id); if($req->hasFile('UserVideo')){ $vid = $req->file(& ...

phpjqueryajaxhtmllaravel-5

Center the first column in jQuery Datatables

Looking to center-align only the first column named "Status": $("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { ...

jqueryhtmlcssdatatables

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

javascripthtmlreactjs