Position elements in the center of the page at 33.3333% width

I'm facing a challenge with centering elements that are floated left and have a width of 33.33333% on the page. I want the text inside these elements to remain aligned to the left, but I'm unsure how to go about centering the items:

ul.home-product-list {}

.home-product-list li {
  float: left;
  width: 33.33333%;
}
<ul class="home-product-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Screenshot

https://i.stack.imgur.com/g7rMg.png

Any suggestions on what steps I should take?

htmlcss

Answer №1

If you want to center items, try using the CSS property margin: 0 auto;.

ul.home-product-list {
  width: 100%;
}

.home-product-list li {
  width: 33.33333%;
  margin: 0 auto;
}
<ul class="home-product-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Answer №2

<div class="product__container">
    <ul class="featured-products">
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
        <li>Product</li>
    </ul>
</div>

    .product__container {
        margin: 0 auto;
        max-width: 800px;
    }

    ul.featured-products {}

    .featured-products li {
        float: left;
        width: 33.33333%;
    }

Hopefully this information is useful for you if you want to center the content within a specific row. The maximum width can be adjusted as needed, I just used a random value for demonstration purposes.

Answer №3

Check out the code below

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100%;
    display: inline-block;
    text-align: center;
}
ul.home-product-list {
    display: inline-block;
    width: 100%;
    /* margin: 0px auto; */
    list-style-type: none;
    padding-left: 0px;
}
li {
   float: left;
    width: 33%;
}
</style>
</head>
<body>
<div>
<ul class="home-product-list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>

</body>
</html>

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

Trick to keep horizontal element alignment intact when scroll bar appears

Currently, all my pages are designed with the standard fixed-width-margin-left-right-auto layout. .container{ width:900px; margin:0 auto; } An issue arises when some of these pages exceed the height of the window, requiring a vertical scroll ba ...

javascripthtmlcsspositionscrollbar

Using Twitter bootstrap with Node.js and Express framework

Is it possible to integrate Twitter Bootstrap with Node.js and Express? I understand that I need to place CSS and Javascript files in the ./public directory (if it's set as default). However, when trying to implement Twitter Bootstrap on Node.js and ...

javascriptcssnode.jstwitter-bootstrapexpress

Need to convert an HTML table to JSON format? Visit convertjson.com/html-table-to-json.htm to easily convert your HTML table

Can anyone help me with converting HTML table data to JSON? I found a website that does something similar: I have tried some solutions but encountered issues at the end. I just need a JSON output to convert it into an array and continue with my project. ...

phphtmljsonruby

Execute the script when the document is fully loaded

Is there a way to show a dialog in jQuery when the document loads without using <body onload="showdialog();">? Can the javascript code be placed in the main div or footer div to work like the onload event? <body onload="$('#dialog').sli ...

javascripthtml

Enhancing functionality through interactive buttons: optimizing the performance of this dynamic data code

I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...

phphtmlmysql

What is the best way to hide the black icons (x) and bars on larger screens and which specific CSS code should I use to achieve this?

I'm attempting to display menu icons only on smaller screens like phones or tablets, and text on larger screens such as laptops or desktops. I've experimented with adjusting the media query and CSS, but haven't had any success. What specific ...

css

What is causing the QJsonValue(undefined) to be returned?

After sending a request to the API for bid price, I am receiving an undefined QJsonValue and unable to display it later. Can anyone help me pinpoint where I might be going wrong? { QApplication a(argc, argv); MainWindow w; w.show(); QNetwor ...

htmlc++qthttpasp.net-web-api

Customizing nested tables in your HTML email

When creating an HTML email template with nested tables for maximum email client support, the question arises about using inline styling. Should the style always be applied to the lowest level td, or is it possible to apply it to a parent table or td? For ...

htmlcssemail

JavaScript for controlling first-person movement with a mouse

Currently, I am working on implementing a first person movement feature using the mouse. While I have successfully implemented it using the keyboard, I am facing challenges with the mouse input. The issue arises from the ambiguity in movement directions ca ...

javascriptjquerycss

How can I center two div buttons within a bootstrap column?

My issue is as follows: I currently have two circles stacked on top of each other, but I would like to position them side by side. Below is the HTML for the existing layout: <div class="col-lg-6"> <div class="page-scroll" style="text-align:c ...

htmlcsstwitter-bootstrap

CSS is effective when styling table elements such as 'tr' and 'td', but encounters issues when trying to include 'th'

I have a variety of tables on my website, most of them without borders. However, I want to add borders to some of them. In my CSS, I am using a specific class for those tables: table { padding: 2px; border-collapse: collapse; table-layout: auto; te ...

htmlcss

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

In order to dynamically add a class to a specific div element higher up the DOM hierarchy when a radio button is clicked, I am in need of assistance. There are multiple instances of these div elements with different radio buttons, so it is crucial that on ...

javascriptjqueryhtml

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

csstwitter-bootstrapasp.net-mvc-5font-awesome

How can I stack one column beneath two columns in a unique format?

I am looking to create a layout similar to the one depicted below. https://i.sstatic.net/m1aCj.png The window is represented by the red box, and the black boxes represent the <div> elements. I have attempted to arrange the image into two columns, bu ...

htmltwitter-bootstrapbootstrap-4

Creating an HTML button to reveal additional text on the same page

Currently, I am working on a project involving html and javascript. My issue lies in displaying multiple options on the same webpage without switching pages. Essentially, I have a plot and a few buttons on one page, and when a user clicks on any of these b ...

javascripthtmlcssbutton

Blocking users on a PHP social networking platform

I'm in the process of developing a social networking platform and I am currently working on adding a feature that allows users to block other users. However, I am facing challenges when it comes to implementing this feature. In my database, there is ...

phphtmlmysql

Incorporate a video within the royal slider feature

Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve ...

javascriptjqueryhtmlcssslider

How to dynamically modify a list box with JavaScript

I have an index.html file with a select tag containing multiple options for a drop-down: <label for="edu">Education</label> <select id="edu" name="edu"> <option value="0">10th</option&g ...

javascriptpythonhtmlmachine-learningflask

"Upon choosing a file using the HTML input file multiple element, a triggered event

After selecting multiple files using the input type="file" HTML element, I am eager to start uploading them. Can you tell me which event I should use to execute code immediately after finalizing my file selection? This is what my HTML code looks like: &l ...

javascriptjqueryhtmldom-events

What is preventing the mat-slide-toggle from being moved inside the form tags?

I've got a functioning slide toggle that works perfectly, except when I try to move it next to the form, it stops working. When placed within the form tag, the toggle fails to change on click and remains in a false state. I've checked out other ...

javascripthtmlangularforms