What is the best way to horizontally center items within an unordered list (ul li) inside a div class

I'm attempting to center a horizontal lineup of small icons. In the Launchrock platform, users have the ability to customize all code. Unfortunately, I do not have access to their default CSS, but we are able to override it.

<div class="LR-site-connect">
    <ul class="LR-connect-share-links LR-clearfix">
        <li><a href="#" class="LR-connect-icon connect-rss" title="rss"></a></li>
        <li><a href="#" class="LR-connect-icon connect-github" title="github"></a></li>
        <li><a href="#" class="LR-connect-icon connect-pinterest" title="pinterest"></a></li>
        <li><a href="#" class="LR-connect-icon connect-youtube" title="youtube"></a></li>
    </ul>
</div>
htmlcssstyleshtml-listscenter

Answer №1

If your icons have a width of 16px and you desire the layout to look like this:

[      [ ] [ ] [ ] [ ]      ]

You may experiment with the following CSS code snippet:

.social-media-links { width: 94px; margin: 0 auto; overflow: hidden; }
.social-media-links > li { float: left; width: 16px; margin-right: 10px; }
.social-media-links > li:last-child { margin-right: 0; }

Include some !important declarations for properties that require overriding, and your issue should be resolved.

Answer №2

If you want to ensure center alignment regardless of existing CSS, try this:

margin:0 auto !important;

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

Increasing height for individual Bootstrap cards, without affecting all cards within the same row

I've encountered an issue where I need to increase the height of a single bootstrap card in a tile-module layout without affecting the height of any other cards in the same row. The code snippet below shows the HTML structure I currently have: <div ...

cssbootstrap-4

I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected. ...

htmlcssbootstrap-5

I am having an issue where my Bootstrap 4 col-sm-6 rows are not properly stacking on mobile devices

Currently facing issues with Bootstrap 4 as my columns are not stacking on top of each other in mobile view. I have two col-sm-6 within each row. Any guidance on how to resolve this would be greatly appreciated, thank you! Feel free to visit the website a ...

htmlcssbootstrap-4responsive

Incorporating .SVG files on an HTML webpage for logos and icons

Is it acceptable to use .SVG images for logos and icons in design? If so, how can I ensure that they are supported by all browsers? If I use a .SVG image on my website, it may not be supported on Internet Explorer. How can I resolve this issue? <img ...

htmlcsssvg

Tips for ensuring that the footer remains at the bottom of the content and stays fixed at the bottom of the viewport

In my Django project, I am using Bootstrap 4.5 and I need the footer to be in one of two positions: 1- At the bottom of the content if the content is larger than the view height 2- At the bottom of the viewport if the content is smaller than the view hei ...

htmlcssbootstrap-4footer

Use ngFor to align items to the left in your design

I am working on a div element where I need to dynamically add inputs that should form a number with a specific format. To ensure the inputs start from the left, I have applied the justify-content-end class. HTML: <div class='row justify-content-end ...

htmlcssangularbootstrap-4ngfor

I am interested in creating a class that will produce functions as its instances

Looking to create a TypeScript class with instances that act as functions? More specifically, each function in the class should return an HTMLelement. Here's an example of what I'm aiming for: function generateDiv() { const div = document.crea ...

javascripthtmltypescript

What is the best way to ensure that the body element is as large as the html element?

My goal is to have the body extend as the page size increases. I attempted setting the height of the body to 100% and the height of the html element to 100%, but it didn't produce the desired outcome: In this illustration, blue represents the body an ...

htmlcss

The issue with HTML5 video tags on iPhone Safari is that 'a' links are not functioning correctly

For my mobile website in Safari browser, I am utilizing the html5 video tag. While the video is functioning properly, I have encountered an issue with 'a' links overlapping on top of the video. These links have been added using absolute positioni ...

iphoneioshtmlhtml5-video

Display issue with ul and li elements in Safari browser causing menu to appear incorrectly

Although I am new to CSS, I managed to create a menu on my website that hovers over the background video successfully. It is a basic menu using a ul with li elements and it appears as intended in all browsers except Safari. In Safari, the menu items stack ...

wordpresscsssafari

Attempting to transform a numerical value into CSS syntax

Currently, I am attempting to loop through several DIV elements, extract a numerical value from each DIV, and then based on that value matching a specific value in the JavaScript code, assign a particular CSS Class back to the original DIV. This is the sn ...

javascriptcss

Using R Markdown and Hugo to Style Blog Titles

I am currently utilizing Hugo and Blogdown to craft a blog following the guidelines outlined here. The title of my blog is specified at the beginning of each post, resembling the example below: --- title: One Two Three author: First Last date: '2019- ...

cssr-markdownhugoblogdown

Is it possible to update an anchor tag using BeautifulSoup directly?

I am aiming to retrieve all anchor tags from an HTML document, regardless of their location or depth within the structure. Once these links have been gathered, I intend to manipulate them and create new links. My goal is to update the original HTML conten ...

pythonhtmlbeautifulsoup

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and ...

htmlcss

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Rumors have it that Bootstrap 4 will make its debut during the year 2016. When duty calls for an upgrade, is a complete re-write truly the best solution? Tackling such a project from Boostrap 2 to 3 was no small feat, and I find myself hesitant to take on ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Tips for stopping an accordion from toggling in Bootstrap when a user clicks on a specific section of the toggle button

I am currently utilizing bootstrap for my project. The accordion feature I have implemented is standard, but I am looking for a way to customize its behavior. Specifically, when a user clicks on elements with the class 'option', I want it to sele ...

javascriptcsssassbootstrap-5

Utilize various CSS styles for individual sections within a multi-page website

Having a web page with multiple subpages each having their own specific CSS can be quite challenging. Sometimes, when all the CSS files are applied globally, they tend to mix with each other causing a headache for developers. One common approach is to decl ...

htmlcss

Issues with the functionality of customisable list items in a list

I am attempting to customize the appearance of specific list items within a ul element. One li element should be displayed in red font, while another li element should have a hyperlink styled with a different color and an underline rollover effect. The thi ...

htmlcss

What is the best way to access a document that has the lang attribute set to "en" using JavaScript?

I am working on implementing conditional styling in JavaScript by referencing this line of code located before the opening <head> and <body> tags: <html class="js" lang="en"> I want to set a condition so that if the l ...

javascripthtmlshopify

Utilize AJAX to parse an HTML Table retrieved from an ASP page and extract targeted cell data

Within our work intranet, there exists an ASP page that retrieves data from a variety of sensors. This data is organized in a table format with multiple rows and columns. It struck me as interesting to showcase some of these outputs on our department&apos ...

javascriptasp.nethtmlajax