Tips for positioning images in the center of a footer

Hello, I am new to coding and would like some help adjusting the code for this website:

The footer section at the bottom of each page features a row of logos. My goal is to make sure that these logo images display properly on mobile devices (without dropping below the footer background) and are centered correctly on desktop screens - currently they appear shifted to the left.

Below is the current code:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:140px;           /* Height of the footer */
    background:#ffffff;
    border-top: solid 3px #ffc600;
    background-image:url(img/global/footer.gif);
    background-repeat: repeat-x;
    background-position:bottom;
}


#footer .structure {
    height: 140px;
    width: 94%;
}

#footer .structure li {
    display: inline-block;
    margin: 10px 10px 0 0;
    float: left;
}

#footer .structure li img {
    height: 65px;
    width: auto;
}

Answer №1

To achieve proper alignment, consider removing the float: left; property from the #footer .structure li selector. Instead, utilize line-height and vertical-align: middle; for vertical alignment, and text-align: center; for horizontal alignment:

#footer .structure {
    text-align: center;
}
#footer .structure ul {
    line-height: 140px;
    vertical-align: middle;
}
#footer .structure li {
    display: inline-block;
}

An alternative approach would be to explore the flexbox technique for enhanced flexibility in layout design.

Answer №2

.bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120px;
    background-color: #ffffff;
    border-top: solid 3px #ffc600;
    background-image: url(img/footer-background.gif) scroll 50% 50%;
    background-repeat: repeat-x;
    background-position: bottom;
}

Answer №3

apply this style for #footer .structure ul - text-align: center;

remove the following style from #footer .structure li - float: left

#footer .structure ul {
   text-align: center; < -- apply this style
}
#footer .structure li {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 10px 0 0;
   /* float: left;*/ <-- remove this style

}

Answer №4

Replace automatic width with percentage values in the provided code snippet.

#footer .structure li img 

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

The background image doesn't extend to the bottom of the page due to the inability to utilize background-attachment

Currently, I am working on a project that requires a background image to cover the entire page. Unfortunately, using "background-attachment: cover" is not an option due to the need for compatibility with iOS, which does not support this property. .sky-b ...

What is the method for using jQuery to retrieve hidden fields with the visible attribute set to "false"?

How can I access a control with "visible = false" attribute using jQuery? Some code examples would be appreciated. <tr>   <td class="TDCaption" style="text-align: left">     <asp:Label ID="lblMsg" runat="server" EnableViewState="False" F ...

What is the best way to use CSS to connect the tips of shapes for perfect alignment?

In an attempt to utilize CSS3 for creating shapes and aligning them to resemble a certain image, I have successfully crafted a pink square along with 4 gray rectangles. Initially, my approach involved creating separate div elements for each shape and adjus ...

The issue with Bootstrap Vue is that it fails to render the CSS properly when utilizing cards

Recently, I delved into the world of Bootstrap Vue and wrote the code snippet below: <template> <div> <div> <b-card-group> <b-card border-variant="dark" header="Dark" align="center"> &l ...

Basic alignment in a table and on a webpage using HTML

I have a basic HTML table that needs some alignment adjustments. <table align="center" border="1" cellpadding="0" cellspacing="0" style="width:1000px"> <thead> <tr> <th scope="row">BB<br /> ...

How to create a listview with stylish rounded corners in jQuery mobile using CSS?

I'm attempting to customize the appearance of a jQuery mobile listview using CSS by adding a border radius to each item. Although things seem to be working mostly as expected, I've encountered a problem where only the first and last <li>&l ...

Display the user's input value in a tooltip without using jQuery

I am looking to achieve this particular layout design. https://i.stack.imgur.com/p9UTH.jpg I am unsure about how to display the input value in the bubble within this layout. The visibility of the bubble should only be triggered on hover. Below is the cod ...

Fixing a menu hover appearance

I recently encountered a small issue with the menu on my website. When hovering over a menu item, a sub-menu should appear. However, there seems to be a slight misalignment where the submenu appears a few pixels below the actual menu item. Check out the w ...

Completely enlarge this inline-block CSS div scan-line

I am looking to create a unique scan line effect that gradually reveals text from left to right, mimicking the appearance of a cathode-ray burning text into a screen's phosphors. The concept involves sliding across black rows with transparent tips. Y ...

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

"Utilizing a Font Awesome icon within the dropdown list of a combobox in Ext JS

I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...

When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided. <picture> <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700"> ...

Trouble with flex wrap in my design template using Material UI

How can I create a responsive template using flexbox wrapping method? <Box sx={{ padding: 0, margin: 0, listStyle: "none", display: "flex", flexFlow: ...

Unable to Trigger Click Event on Div Element in Angular 9

Take a look at my HTML code snippet <mat-grid-list cols="3" rowHeight="150px"> <mat-grid-tile *ngFor="let tile of tiles;index as j;" [colspan]="tile.cols" [rowspan]="tile.rows" ...

I'm curious about the specific sequence of CSS properties order recommended by Stylelint. Where can I locate

With Stylelint's CSS order option enabled, I'm having trouble getting Visual Studio Code to display the errors. Where can I locate the declaration/property order being used? Below is a snippet of my .stylelintrc.js configuration file: module.exp ...

Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...

Tips for creating CSS from the Google Chrome inspector for future use

Hey there, I spent the evening debugging my JSF page and noticed some changes in appearance when checking/unchecking options in Google Chrome Inspector. I want to create a new CSS file based on these checked options and save it for use in my web applicat ...

The slider causing conflicts with widgets and content positioned below it in an HTML layout

When implementing a slider with a fade effect, there seems to be an issue with the placement of widgets on the homepage. The problem arises from the margin-top setting as when images change in the slider, the widgets clash with the slider. During the trans ...

Disabling the child element from triggering the parent element's onclick function, while still allowing it to respond to its own content

My list elements have onclick-functions that change the display of each element and its child div, moving them to the top of the list. Clicking again reverses this effect. The issue arises because the child div contains search fields, clickable pictures, ...