Align the list at the center within a div container

Struggling to align my image gallery within a designated div. Currently facing an issue where the icons appear too small and not perfectly centered.

This is the CSS and HTML I currently have:

       <div id="social">

                <ul>
                    <li><img src="img/footertwitter.png" alt="placeholder+image"></li>
                    <li><img src="img/footerfacebook.png" alt="placeholder+image"></li>
                    <li><img src="img/footeremail.png" alt="placeholder+image"></li>
                </ul>

            </div>


        #social {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
  }

    #social ul {
/*margin: 0 0 3em 0!important;*/
padding: 0!important;

}

  #social ul li {
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
  }
csslisticonscenter

Answer №1

If you want to center the items in your ul, try adjusting the display property to block and setting the margins to auto. This will help maintain the margins you've already set while achieving the desired centering effect.

Here's how the updated CSS code would appear:

#social 
{
  margin: 0 auto;
  text-align: center;
  width: 90%;
  max-width: 1140px;
  position: relative;
}

#social ul 
{
  padding: 0;
  margin: auto;
  display: block;
}

#social ul li 
{
  list-style-type: none;
  display: inline-block;
  margin-left: 1.5em;
  margin-right: 1.5em;
}

You can see the changes in action in this JSFiddle. I hope this explanation helps!

Answer №2

  1. To adjust the size of the icons to your liking, you can simply increase the dimensions as needed:

    social ul li img {

    width:50px; 
height:50px;

    }

  2. Set a specific width for the ul element and center it using the following CSS code:

    social ul {

    width:300px; /*Example*/
display:block;
margin:0 auto;

    }

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

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

htmlcss

What is the method to assign a placeholder value using CSS?

Is there a way to assign a placeholder value to an input box using CSS only, without relying on JavaScript or jQuery? If so, how could this be achieved? ...

htmlcssplaceholder

Adjust transparency according to the information extracted from the AnalyserNode

Currently, I am exploring ways to animate text opacity based on the volume of an audio file. While browsing online, I came across this specific codepen example, which showcases a similar concept. However, as I am relatively new to JavaScript, I find it ch ...

javascripthtmlcssaudio

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

cssangularbootstrap-4angular-materialng-bootstrap

What is the best way to create a website cover image with a set height and a width that expands?

Is there a way to have a cover image on a web page that expands in width as the screen size increases, but maintains a fixed height? I found a page with the desired effect that I want to replicate: Below is the link to my page where I want to implement t ...

htmlcss

When the text overflows the boundaries of a paragraph in CSS HTML

I am facing an issue with text overflowing in a paragraph <p style="width:200px;">Text goes here</p> As the text in the paragraph increases in width, it does not automatically wrap to a new line, causing it to overflow outside the paragraph ...

htmlcss

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

Below is a snippet of my code: <body> <table> <tbody> <div>test</div> </tbody> </table> </body> Upon executing the code mentioned above, it transformed automatically in ...

htmlcsshtml-table

Preventing Text Chaos in CSS Layouts: Tips and Tricks

I'm facing an issue with the alignment on this page: . When the page is resized, some of the text links are too long and causing a problem with the layout of the stacked images. How can I fix this? Here is the HTML & CSS code for reference: CSS: #b ...

htmlcss

Utilize HTML5, CSS, and Responsive Web Design to place four boxes into a div container

Is there a way to arrange four boxes inside a div so that they are positioned at the corners of the top-left, top-right, bottom-left, and bottom-right? And when you click on the box in the middle, a window opens with text. I'm looking for something s ...

htmlcssresponsive-design

Creating a div that displays only the initial 50 characters through CSS

My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me: white-space: nowrap; overflow: hidden; text-overflow: ellipsis ...

htmlcssstyling

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

I'm a beginner and encountered an error saying Uncaught TypeError: players.setAttribute is not a function when submitting an action. How can I solve this issue? Please share your insights. ''' //selecting all necessary elements const s ...

javascripthtmlcss

Strange Phenomenon: Website Appears Enlarged When Accessed through Server

Similar Question: Why does my website appear smaller on a live server than when deployed locally? After reviewing the answer to the similar question linked above, I still found myself facing the same issue with no resolution. My problem is that the webpa ...

htmlcssbrowser

What is your approach to setting up this navigation system with HTML and CSS?

Navigation Nav w/ Hover State Can you create a navigation menu using HTML and CSS? The white box serves as a placeholder for a logo. Note: The "Products" link has a drop-down menu feature. See my current implementation below, although it's not ye ...

htmlcsscss-shapes

Combining input elements and captchas in one line within Bootstrap

I am currently working on a form group that includes a label, a captcha image, and an input field for the captcha code. My goal is to have the label positioned at the top of the form group, with the captcha image and input field aligned in one line. I have ...

htmlcsstwitter-bootstrap-3

Alignment of button within bootstrap column is skewed when screen size is reduced

My button is perfectly centered in one of my bootstrap columns, but things start to get messy when the screen size shrinks and the button overlaps with another column containing text. Adjusting the margins only seems to make things weirder. .center-btn- ...

htmlcsstwitter-bootstrap

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...

javascripthtmlcss

See-through navigation bar custom-made for materializecss

I've been trying to make my navbar transparent using materializecss, but all my attempts so far have resulted in it turning white. Any suggestions would be greatly appreciated. Thank you! Here is the code I tried: <nav> <div class="nav-w ...

htmlcssmaterialize

Typekit compatibility with Internet Explorer 11

After dedicating months to a project, everything seemed to be running smoothly until one client consistently pointed out font discrepancies in the screenshots. I attributed this to a possible browser issue but soon discovered that the entire network had sp ...

cssinternet-explorertypekit

Overlap of a fixed right column over a fixed sidebar in Bootstrap 4, causing it to overlap the

I am struggling to fix the layout of my website's right dark column and sidebar. I've attempted several methods, including setting fixed parameters with no success. My goal is to have the content-c class (dark column) fixed and the sidebar fixed ...

htmlcssbootstrap-4grid

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

javascriptjqueryhtmlcss