The alignment of the footer navigation is off-center

I can't seem to get my footer navigation centered properly. I've tried adjusting the CSS but it's still not working as expected.

.main-footer li {
  float: left;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

I've experimented with using display: block or display: inline-block in the CSS selectors but no luck so far. Any suggestions?

Many thanks, Kate

csscss-floattext-align

Answer №1

One important rule to remember: Avoid using float for layout purposes as it can disrupt your content and lead to a cascading effect in your CSS.

Instead, opt for flex -> Check out this resource on flexbox MDN (along with other helpful links).

To align items vertically, use align-items: center and for horizontal alignment, utilize justify-content: center.

Ensure you include box-sizing: border-box so that the padding of the footer is accounted for within its 100% width, preventing any overflow scrolling on the x-axis.

.main-footer li {
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  display: inline-block;
}

.main-footer {
  display: flex;
  align-items:center;
  justify-content: center;
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
  box-sizing:border-box;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Answer №2

Give it a shot using flexbox:

.main-footer {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: lightblue;
    padding: 2em;
    margin-top: 30px;
}

.main-footer li {
    float: left;
    font-size: 0.85em;
    padding: 0 0.5em;
    margin-bottom: 0.5em;
}
<footer class="main-footer">
    <ul>
        <li><a href="#">Contact us</a></li>
        <li>&copy; Copyright Acme Industries 2019</li>
    </ul>
</footer>

Answer №3

By utilizing the float property, you can dictate that elements align to the left. To center an element within its parent container, consider using display:inline-block along with text-align:center on the parent.

.main-footer li {
  display: inline-block;
  font-size: 0.85em;
  padding: 0 0.5em;
  margin-bottom: 0.5em;
  list-style-type:none
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em;
  margin-top: 30px;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Answer №4

If you prefer not to use flex, you can simply adjust the display property of your UL element.

Here's an example:

.main-footer ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.main-footer li {
  float: left;
  font-size: 0.85em;
  padding: 0 0.5em;
  list-style-type: none;
}

.main-footer {
  text-align: center;
  width: 100%;
  background-color: lightblue;
  padding: 2em 0;
  margin-top: 30px;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

Answer №5

To ensure the centering of the footer container, set the ul as the flex container and remove the left and right padding from the container. Add padding to the ul instead.

If not using flexbox, apply display: inline-block to the li elements.

.main-footer {
  width: 100%;
  background-color: lightblue;
  padding: 2em 0;
  margin-top: 30px;
}

.main-footer ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

.main-footer li {
  font-size: 0.85em;
  margin-right: 0.5em;
}

.main-footer li:last-child {
   margin-right: 0;
}
<footer class="main-footer">
  <ul>
    <li><a href="#">Contact us</a></li>
    <li>&copy; Copyright Acme Industries 2019</li>
  </ul>
</footer>

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

Scrollspy in bootstrap incorrectly highlights the navigation item as active

I seem to be having an issue with bootstrap scrollspy. For example: <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white"> ... </header> <div class="container-fluid width content-main" data-bs-spy=" ...

cssbootstrap-5

Tips for centring navigation horizontally and making it responsive using CSS

Is there an effective way to horizontally center the navigation within a div using responsive CSS? HTML: <nav id="centermenu"> <ul> <li><a href="#">Business</a></li> <li><a href="#">Spec ...

css

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

htmlcss

The best practices for coding Jquery plugins to adhere to style guidelines

I have been grappling with this issue for quite some time now, and I am seeking feedback from others. I am in the process of creating a personalized library to expedite web app development, and I want to ensure that I adopt the correct approach. My intenti ...

javascriptjquerycss

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

javascripthtmlcssfontsfont-size

Tips for customizing the appearance of a checkbox made with AngularJS

I need to style the checkbox using CSS without modifying the HTML code provided due to company restrictions. Is there a way to customize the appearance of the checkbox purely through CSS? Below is the AngularJS code snippet: <label class="form-lbl n ...

htmlangularjscsscheckboxtwitter-bootstrap-3

Creating a Form with Table-like Alignment Using Div Tags

Take a look at my code: <div> <label>First Name</label><input type="text" id='first_name'/><br /> <label>Last Name</label><input type="text" id='last_name'/><br /> <l ...

htmlcsscss-tables

The CSS class is mistakenly being applied to the entire page instead of just the specific div it was

Here is the HTML code I am working with: <!DOCTYPE html> <head> <title></title> {% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" /> <link rel="styl ...

htmlcss

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

I have successfully implemented this code for vertical scrolling: $('.flapleftclass').css('top',(0+(scrolled*0.5))+'px'); This method works well because I am referencing to the top position. However, when it comes to horizon ...

javascripthtmlcsswebparallax

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

jqueryhtmlcssangularjs

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

htmlcssbootstrap-4

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

javascripthtmlcssangularjschart.js

Firefox causing images to have a white border after rendering

My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...

cssfirefox

Customizing Sass Bootstrap Variables for Tailored Responsive Designs (Specifically for Mobile or Desktop)

Currently, I am in the process of working on a website that has opted for the adaptive approach, using separate mobile and desktop templates instead of responsive design. Despite this choice, Bootstrap is still being utilized on these templates, loading al ...

csstwitter-bootstrapsassbootstrap-sass

Conceal a list of items within a div that has a particular class

This is a sample of my HTML code: <div class="row"> <div class="col-md-12"> <div class="scrollbox list"> <ul class="list-unstyled"> <li id="articulate.flute">articulate flut ...

javascriptjqueryhtmlcss

When switching from JavaScript to jQuery, the button values become invisible

Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience ...

javascriptjqueryhtmlcssajax

Steps to create a clickable button wrapper label in React

Contained within the components below: <CheckboxGroupLabel htmlFor={option.label}> <FormCheckbox onClick={() => onChange} key={option.label} defaultChecked={defaultChecked} {...rest} /> {option.value} ...

javascripthtmlcssreactjslabel

How can I retrieve the current background color and revert it back after a .hover event?

I am trying to use the .hover function to change the background color of a menu. Each menu item has a different background color, so I want it to return to its original color when the user hovers off. In other words, I want the script to read the current b ...

jquerycssajax

Step-by-step guide on positioning mid and bottom text using Bootstrap grid system

After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright ...

htmlcsstwitter-bootstrapbootstrap-4

Replacing CSS conditional statements with jQuery

My CSS code is set to hide the #global-widget-base tag and display a tab #aside-expander when the browser width is less than 1200px. @media screen and (max-width: 1200px) { aside#global-widget-base { display: none !important; } #aside- ...

jqueryhtmlcss