Ways to align a Unordered List (ul) in the middle

I have a list of items with some elements floated to the left. Currently, it looks like this:

| A | B | C | D | E < empty space> |

I would like it to appear as:

| A | B | C | D | E |

Centered on the page with centered contents as well.

HTML

<div class="profile-content">
    <ul class="content-btn">
        <li>
            <div class="digits">83</div>Followers
        </li>
        <li>
            <div class="digits">1507</div>Tweets
        </li>
        <li>
            <div class="digits">234</div>Friends
        </li>
        <li>
            <div class="digits">51</div>Likes
        </li>
        <li>
            <div class="digits">42</div>Gits
        </li>
    </ul>
    <div class="clear"></div>
</div>

CSS

.content-btn  {
    width:100%;
    margin: 0 auto;
}

.profile-content ul li {
    float: left;
    padding: 5px 8px;
    text-align: center;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid #ffffff;
}
.profile-content ul li .digits {
    font-weight: bold;
    font-size: 16px;
}

Answer №1

To center align the content of the profile, add

.profile-content{text-align:center}
and instead of floating the list items, use display:inline-block;

JSFiddle

It's important to note that there is no .profile-card in your HTML markup, so I have removed it from the CSS selector.

.profile-content ul li{...}

.profile-content ul li .digits{...}

Answer №2

.content-btn  {
    width:100%;
    margin: 0 auto;
}
.content-btn li{
    float: left;
    padding: 5px 8px;
    text-align: center;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid #ffffff;
    list-style:none;
}
.content-btn li:first-child{
    border-left: 1px solid #eeeeee;
}
.profile-card .profile-content ul li .digits {
    font-weight: bold;
    font-size: 16px;
}
.clear{
    clear:both;
}

Answer №3

check out this website: jsfiddle.net/g33HN/

Take a look at the link provided, I believe it will be useful for you.

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

Spring Boot application on Prime Faces is not displaying CSS after deployment to Heroku

I'm currently using a combination of Spring 3.1.3, Prime Faces 3.4.2, Hibernate 3.6.8, and Pretty Faces 2.0.4. When I deploy my application on a local server (Apache Tomcat 7), the CSS displays properly. However, when I deploy the same project to Her ...

What is the best way to connect an HTML file to a controller in Angular.js?

When developing an app module using the MEAN stack with MVC, I created a folder named AppModules. Inside AppModules, there is a folder called search, which contains three subfolders: models, views, and controllers. I've written an HTML file in the vie ...

Is it possible to load babel-polyfill using <script async> tag?

I have created a modal dialog on my webpage that appears when certain interactions occur. Utilizing React, I used webpack to generate a compact bundle that can be added to my page using a script tag. Since it incorporates Generators and needs to support ...

Unique hover effects for tab navigation

I have designed my website with 4 tabs on the homepage: holidays, hospitality, events, and consulting. I am trying to create an effect where hovering over the tabs displays images. Here is the code I have tried: HTML: <div class="menu_links"> & ...

Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've wo ...

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

Extract the value of an HTML tag and store it in a PHP variable

I have successfully implemented JavaScript code to dynamically update the value of an input tag in my popup. However, when I try to echo out this updated value using a PHP variable within the same popup, it doesn't seem to work as expected. Despite un ...

The time allowed for the menu items to reveal their subitems may be delayed

I am facing an issue with my website where the menu items are displayed horizontally and each submenu is shown when a user hovers over them. However, I have noticed that when the user tries to click on the submenu item, it disappears too quickly. Is ther ...

What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link function InlineDatePickerDemo(props) { const [selectedDate, handleDateChange] = useState(new Date()); return ( <Fragment> <MuiPickersUtilsProvider utils={DateFnsUtils}> <Keyboa ...

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Greetings! I am currently working on my first website design using JQuery. My project includes a dropdown login box created with Twitter-Bootstrap. Unfortunately, I'm facing some challenges with the JQuery script that controls the behavior of the logi ...

jQuery Animation Issue: SlideDown Effect Not Working as Expected

I'm feeling quite confused about this situation. I've been attempting to utilize the slideDown function in jQuery, but when I click on the 'information' div, it just jumps instead of animating smoothly. I suspect that one of the cause ...

Customize the appearance of the search box in Serverside Datatables

Is there a way to adjust the search and show inputs for datatables so that I can customize their width and make them fit my dynamic column sizing? The issue I ran into is that these inputs are enclosed within <label> tags in the source JavaScript, an ...

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

Should the .js file type be omitted in the <script> tag for semantic accuracy?

Upon reviewing some inherited code, I noticed that JavaScript files are being linked in the following format: <script src="/js/scriptfile" type="text/javascript"></script> However, I was expecting to see: <script src="/js/scriptfile.js" ...

Div's background image displays flawlessly on Code Pen desktop, yet fails to appear when viewed on mobile devices

I am currently experiencing an issue with my background images not rendering properly on mobile devices, specifically safari and chrome on iPhone XR. Although they appear to work perfectly on Code Pen - resizing properly as the viewport shrinks and switchi ...

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

How can I retrieve text within a p tag using xpath and xpath axes?

<div class="details"> <p><b>Compatibility:</b> All versions</p> <p><b>Category:</b> Entertainment</p> <p><b>Updated:</b> Apr 2, 2014</p> <p><b>Version ...

Show varying HTML headers on the initial page as opposed to subsequent pages

Currently, I am utilizing an HTML to PDF Library known as Nreco for converting HTML Pages into PDF format. The task at hand involves implementing a consistent header on every page, with the exception of the first page that should display the Recipient Addr ...

The hover effect for changing the style of one element when hovering over another element is not functioning as

I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...

Tips to prevent modal impacts on underlying elements?

When I click on a button, a modal pops up. However, the background contents seem to spread out and sometimes scroll automatically when the modal appears. I have searched for a solution to this issue but have been unsuccessful. Can anyone please help me ide ...