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

Updating the style of a CSS element using Python Selenium

Is it possible to change the css element style using Python Selenium during automation to increase the height of the page? The structure of the element in the HTML is as shown below: <div style="overflow-y:scroll;overflow-x:hidden;height:150px;&quo ...

pythonhtmlcssselenium

The functionality of jQuery .rotate() appears to be malfunctioning

I'm struggling to get this code working properly. My jQuery version is 2.1.0. Here's the code snippet: $("a.shownav img").rotate(180); Any suggestions on how to make it function correctly without relying on a plugin? ...

jquerycssrotationcss-transforms

Display unique information according to the value in the form field (email domain)

I've developed an innovative ajax signup form that integrates jQuery and CSS3. The unique feature of this form is its multi-step process. In the first step, users are required to enter their email address and password. What sets this form apart is i ...

jqueryhtmlajaxformscss

Ways to configure dynamic and responsive divs using CSS exclusively (no javascript needed)!

I am looking to have my main div expand in height based on the categories div, content, or product pictures. Check out the website here Here are the issues I'm facing: The content div and categories div are both within the main div, but the produ ...

htmlcss

What is the best location to insert CSS in an HTML document?

I tried to customize the CSS on my Blogger blog, but unfortunately, I am unable to access the theme designer. As a result, I attempted to add CSS directly into the code using tags. However, I am having trouble locating the tag within the HTML file. This is ...

htmlcssxmlbloggerblogger-dynamic-views

The picture won't stay within the confines of the container

As I work on my fitness site, I wanted to incorporate a sponsor section. While exploring some code that matched the style of my website, I discovered this snippet below. However, being new to CSS, I struggled with fixing it to ensure that the images fit ...

htmlcss

Styling <html:link> elements with CSS

I'm new to using struts and I'm struggling with applying my CSS styles to link tags. <html:link action="LoginLink" styleClass="loginButton"/> My goal is to add a button image to a link that directs to a login page. I've successfully ...

cssbuttonstrutsstruts-html

How tall can an image be to load successfully on an iPad website?

Similar Query: Max image width in Mobile Safari? Dealing with unwanted downscaling on panoramas What is the maximum height an image can be loaded at on a website when viewed on an iPad? I've tried loading an image (a sprite) with a height exceeding ...

cssimageipad

Creating custom styles using Material-UI's makeStyles function with both before and after

Currently, I'm tasked with a project that involves utilizing the CSS code below. .hexagon, .hexagon::before, .hexagon::after { width: 67px; height: 116px; border-radius: 18%/5%; } I am wondering if there is a method to apply the specified style ...

cssreactjsmaterial-uijssmakestyles

The z-index of the fixed header in FullPageJS is causing the section's content to be hidden

For my current project, I am incorporating FullPageJS and using a fixed top menu that adjusts its height based on the viewport size. On smaller screens, the menu items will be stacked on top of each other, while on wider screens, the menu items will be po ...

jqueryhtmlcssfullpage.js

Modify the font style of numbers based on the keyboard language selected by the user

Is it possible to change the font family of numbers in input fields based on the user's keyboard language? For example, if the user is typing in Persian, the numbers should be displayed in a Persian font, and when they switch to an English keyboard, t ...

javascripthtmlcssreactjsnext.js

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

cssoverriding

Getting a jquery lightbox up and running

After experimenting with three different jquery plugins in an attempt to create a lightbox that appears when clicking on a link containing an image, I am currently testing out this one: . Despite adding the plugin source in the head and ensuring that the l ...

javascriptjquerycssdjangolightbox

Adding an active class to a large image when a thumbnail image is clicked can enhance user experience and

I've created a photo gallery using jquery. Currently, when I click on "next", the image changes based on the index. However, I also want to be able to click on the thumbnails (small images) and display the larger image according to that specific inde ...

javascriptjqueryhtmlcssslider

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

htmlcss

None of the angular directives are functioning properly in this code. The function attached to the submit button is not executing as expected

I've experimented with various Angular directives in this code, but none seem to be functioning properly. I'm wondering if a library file is missing or if there's some issue within the code itself, potentially related to the jQuery file. The ...

javascriptjqueryhtmlcssangularjs

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

Can you explain the significance of using `!important` in CSS without specifying a value?

Scenario: Currently, I am facing an issue with using the bootstrap 4 stylesheet in conjunction with NextJS. The bootstrap 4 stylesheet, compiled from SASS, contains code like: .checkbox.checkbox-accent > span { border-width: !important; } This speci ...

csswebpacknext.js

Issues encountered while trying to style an unordered list using the table-cell property

I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4. Is there a way to keep the numbers fixed on the left while allowing the text to expand ...

htmlcss

assigning attributes to web addresses

Is there a way to set a style property for webpages by targeting addresses that contain /index.php/projecten/ instead of specifying each complete address in the code? Currently, I am using the following code: <ul class="subnavlist" style="display: &l ...

phpjavascriptcss