Using CSS to create centered blocks

I have a list of blocks that I want to center without any margins, like the example below but margin-free.

ul{
  margin:0px;
  padding:0px
} 
.colors{
    padding-left: 50px;
    padding-right: 50px;
}
 .colors li{
    display: inline-block;
    list-style: none;
    height: 8px;
    width: 38px;
    margin: 0;
    padding: 0; 
}
.product{
width: 450px;
  text-align:center;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
}
<div class="product">  
  <div class="colors">                            
    <ul>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
    </ul>
  </div>
</div>

Avoid using Javascript and utilize only CSS. Currently, it's set to display:inline-block, which is causing some unwanted margins.

htmlcss

Answer №1

When you designate ul as a flex container, it will remove the white-space.

If necessary, you can apply some vertical margin to li and padding to the parent container.

ul{
  margin:0px;
  padding:0px;
    display:flex;
  justify-content:center;
  flex-wrap:wrap;
} 
.colors{
    padding-left: 50px;
    padding-right: 50px;
}
 .colors li{
    display: inline-block;
    list-style: none;
    height: 8px;
    width: 38px;
    margin: 0;
    padding: 0; 
}

.product{
width: 450px;
  text-align:center;
  box-shadow:0px 0px 15px rgba(0,0,0,.3);
}
<div class="product">  
  <div class="colors">                            
    <ul>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
      <li style="background-color:#00ff00;"></li>
      <li style="background-color:#0f0f00;"></li>
      <li style="background-color:#f00f00;"></li>
      <li style="background-color:#00f00f;"></li>
    </ul>
  </div>
</div>

Answer №2

In typical browsers, a 3px gap is allocated for text spacing. However, in this scenario where there is no visible text present, you can simply include the following CSS:

ul{
  font-size:0;
}

Answer №3

To achieve this, you simply need to minify the HTML code and any unnecessary white spaces will be automatically deleted.

For example:

<div class="item"><div class="categories"><ul><li style="background-color:#ff0000;"></li><li style="background-color:#00ff00;"></li><li style="background-color:#0000ff;"></li><li style="background-color:#ffff00;"></li><li style="background-color:#ff00ff;"></li></ul></div></div>

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

Switching background images with Javascript through hovering

I am currently working on implementing a background changer feature from removed after edits into my personal blog, which is only stored on my local computer and not uploaded to the internet. However, I am unsure of what JavaScript code I need to achieve t ...

javascripthtmlimagebackgroundonmouseover

HTML dropdown menu to trigger an action with the submitted URL

I need assistance creating a menu of options with corresponding URL actions. Here is the structure I have in mind: <form> <select> <option value="1">1</option> <option value="2">2</option> <option value="3 ...

javascripthtml

Is the table row changing in size when a filter script class is applied?

When trying to filter table rows by category and adding the class filterTr to the element <tr>, I noticed that the width of the <tr> element changes, causing it to no longer align with the <th> element above. I am unsure why this resizin ...

cssfilterhtml-tablewidth

Switch picture when hovering over button image

Looking for a solution where I have 2 images - one inactive and the other active. I want the inactive part of the image to change to active when someone hovers over it. Here are the pictures: I was able to achieve this using mapster, but it's not res ...

htmlcss

Can a piece of code be created that generates the XPath for a specific element?

I'm interested in finding out if there is a way to automatically generate an XPath by simply selecting an element, eliminating the need for manual updates when changes occur in HTML files on websites. I welcome any suggestions or alternatives that can ...

javahtmlcssseleniumselenium-webdriver

Is there a way to ajax just specific HTML table rows instead of transmitting all the form inputs?

For weeks, I've been struggling to use AJAX POST with a JSP script to update my HTML table rows without success. Can anyone provide guidance on this? Below is what I have attempted so far. window.addEventListener("DOMContentLoaded", function () { ...

javascriptjqueryhtmlajaxjsp

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

csssass

Horizontal SWF's are providing spaces of white in between them

I'm struggling with removing the white space between SWFs on my HTML page. I've tried using 'block' in CSS, but it's not working for a horizontal layout. Adding "0" for the border hasn't helped either. I'm getting frustr ...

htmlcssflashactionscript-3

Incorporate dynamic HTML into Angular by adding CSS styling

Just starting out with Angular and have limited front-end experience. I'm feeling a bit lost on how to proceed. Currently, I have a mat-table with a static datasource (will connect to a database in the future), and I need to dynamically change the bac ...

htmlcssangular

Finding the Right Spot to Edit HTML Code in Microsoft Dynamics CRM

Is it possible to change the width of a custom iframe in Microsoft Dynamics CRM that is currently set at 1900px? <div id="mainContainer" class="classname_here" style="max-width: 1900px"> I was able to change it to 100% using a browser extension. Ca ...

htmlcssiframedynamics-crm

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Are you looking to use special LaTeX fonts like \Pluto from marvosym in your web development projects? Wondering how to display this symbol with HTML / JavaScript / CSS without relying on an image? You can download the font from This symbol corresp ...

javascripthtmlcssfonts

How come my columns are stacking on top of each other instead of being positioned side by side?

I am having an issue with my products displaying below each other instead of next to each other in their own column. How can I adjust the layout so that they appear side by side? View image <tr> <th>Month</th> <div *ngFor="let p ...

htmlangularhtml-tablemultiple-columns

Creating a vertical scrollable content using FlexBox

Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...

cssreactjsflexboxmaterial-ui

Guide on hosting Google's Material Design Icon-Fonts on your personal server and incorporating them into your website

To access the Material Design Icon Fonts, it is advised to download them in various formats such as ttf, eot, woff, and woff2. These fonts can then be hosted on a server location and integrated into your CSS using the following code: @font-face { font- ...

cssfontsmaterial-designwebfontsicon-fonts

StorageLimit: A new condition implemented to avoid saving repetitive values in the localStorage

Is there a way to store the text of an li element as a localStorage value only once when clicked? If it already exists in localStorage, a second click should have no effect other than triggering an alert. I'm currently using an if statement inside a ...

javascriptjqueryhtmllocal-storage

Revolutionary newspaper design utilizing asp.net's C# web forms

Trying to create a dynamic newspaper layout using ASP.NET C# web form. Struggling to set the page layout size inside a slider and display specific news content on a new page when clicking on an area of the newspaper using Repeater or another suitable contr ...

css

Accelerate blinking timer by utilizing CSS3 animations

I'm currently developing a quiz application that includes a timer counting down from 10 seconds to 0 seconds. As the timer reaches closer to 0 seconds, I am looking to implement a feature where my text blinks faster and faster. Additionally, I would l ...

htmlcsscss-transitionscss-animations

Retrieve the div element by calling a scriptlet with JavaScript

I am facing an issue with a web page that includes a scriptlet like this: <div id="flash_chart"> <%=content_data['report_text']%> </div> The variable content_data['report_text'] contains a lengthy string ...

javascripthtml

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

javascripthtmlcssangularjschart.js

Implementing a PHP form for seamless image uploads

I have been attempting to upload a form that includes an image. I have successfully retrieved the data for the brand name and other fields. However, I am encountering an issue with retrieving the image name and type. Can someone please assist me in ident ...

phphtml