What is the best way to align this horizontal list in the middle of a fixed div?

I have a UL element that contains 4 icons within a div using absolute positioning to align it to the bottom of the screen. This div is located within a fixed sidebar.

To create a horizontal list, I applied display: inline to the list items.

You can see the issue I'm facing with the alignment of the 4 icons in the code example running on bootply. The icons are slightly offset to the right instead of being centered:

Other content in the sidebar appears to be centered without any problems, so it's specific to this list of icons.

I've tried various methods like using inline-block and float:left on the list items, but the icons still don't align properly. Can anyone spot the mistake here? I feel like I might have overlooked something simple.

htmlcsstwitter-bootstrap

Answer №1

#social-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Additionally, there was a mistake where you wrote text-align: c instead of text-align: center

I also made changes to your demonstration: link

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

Validating groups of fields using Angular fieldsets

AngularJS validation is working well with ng-required. However, I am interested in checking if all the form elements within my fieldset are valid. <form> <fieldset> <legend> Part one <img src="/co ...

javascripthtmlangularjsformsvalidation

Internet Explorer experiences performance issues when a table containing over 500 rows is being utilized

Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...

phpjqueryhtmlcssinternet-explorer

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

I am working on creating a unique table layout for a web page that resembles the design linked below: Click here to view the image http://kelostrada.pl/upload/test.png Your assistance in achieving this would be greatly appreciated. Currently, I have imp ...

htmlcsscross-browserhtml-table

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

javascripthtmlcss

In Android Kitkat 4.4.4, the Ionic navbar displays icons vertically when using the <ion-buttons end> feature

When viewing in the browser with ionic serve, everything looks fine. However, on an Android Kitkat device running version 4.4.4, the buttons on the right side of the navbar are displaying vertically instead of horizontally. <ion-navbar> <ion-ti ...

cssionic-framework

Using HTML and CSS, we can achieve a fixed position using the `position: sticky`

On my website, I have elements that utilize transformations. One issue I've encountered is that these transformations end up resizing the viewport. Normally, I would address this by setting overflow-x: hidden for both html and body, but doing so disru ...

htmlcsscss-transformssticky

Using AJAX in JavaScript within an HTML document is a valuable skill to have

I have the following JavaScript function that I need to call the /print2 function without clicking any buttons. I attempted to use Ajax for this, but I am new to Ajax and JavaScript. Can you help me identify where the issue might be? Thank you... <scr ...

javascripthtmlajax

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

htmlcsstwitter-bootstraplaravel-5laravel-blade

What is the hierarchy for displaying elements depending on the props?

I have developed a search input component that includes an icon which I want to reposition (either on the left or right side) depending on different scenarios. This input is part of a bootstrap input-group, so modifying the order of elements within my di ...

javascriptreactjstwitter-bootstrap

Is there a non-table layout method to achieve equal width sharing with a fixed solution?

If I have n different elements to be placed in the same horizontal space, each taking up 100% of the screen width, for example: <table style="width:100%;text-align:center;table-layout:fixed"> <tr> <td><input/></td ...

htmlcsslayout

How much does it typically cost to implement external libraries into a project?

Here are some of the most commonly used front-end web development libraries: jquery-min.js (95.9 kB) angular.min.js (108.0 kB) bootstrap.min.css (113.5 kB) bootstrap-theme.min.css (19.8 kB) bootstrap-fonts (185.7 kB) bootstrap.min.js (35.6 kB) All in al ...

javascriptjquerycssangularjstwitter-bootstrap

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

cssangularsassnavigation

"Can anyone provide guidance on how to initiate a css 3d animation by clicking a button

Currently, I am developing a folding hide/show animation that can be triggered using Javascript. If you would like to take a look at the code and see a working example, please visit this link: You can also view just the gist here: https://gist.github.com ...

javascriptjquerycssanimationwebkit

Create JavaScript variable from either HTML or database sources

Hello, I am trying to implement a counter that retrieves its value from a JavaScript file, but I would like to customize it. Below is the JavaScript code: function updateCounter(count) { var divisor = 100; var speed = Math.ceil(count / divisor); ...

c#javascriptasp.nethtml

What are the steps to modify the MIME type in order for the browser to correctly display a CSS

I'm encountering an issue where my CSS code is not rendering in the browser, and it seems to be related to MIME types (which I'm not familiar with). I am using EJS as a template engine. The error I see in the console is... Refused to apply sty ...

cssnode.jsejsmime

Challenges with jQuery parent method reaching the grandparent element

Hey, I'm a newbie to jQuery and I'm trying to make changes to divs that are two levels above the function trigger: Here's my initial attempt: I try to locate the closest '.node' which is the parent of all other divs and then modif ...

jqueryhtmlcss

Troubleshooting the issue with a styled subcomponent in React using Styled Components

Recently, I've delved into React and have been experimenting with creating a Modal component using styled components. My goal is to achieve a similar effect to Framer Motion's motion.div, but utilizing styled components instead. Currently, I hav ...

javascriptcssreactjsnext.jsstyled-components

What is the best method to locate a particular item using XPATH in case of duplicate values?

I'm facing an issue where two products are priced the same at 499 RS, but my code is consistently selecting the first product instead of the second one. How can I ensure that it selects the correct duplicate item in this scenario? ...

htmlseleniumxpath

Submit button remains inactive even after submitting form via ajax request

I have a page with multiple forms on it for a CRM that I am developing and each form is properly named, but I am facing an issue where the submit button remains disabled after making a $.post() request. Here is my universal post handler for form submissio ...

jqueryajaxhtmlforms

Excessive content - letter "y" disrupts the row layout on mobile devices

I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow. While everything looks fine on a desktop, the layout breaks o ...

htmlcssbootstrap-4