Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles.

One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try.

To see the problem with the right border alignment, click here - https://i.stack.imgur.com/MQyWw.jpg

I have experimented with various positioning and margin settings, but so far I have not been able to find a solution to align all tiles in the center instead of the left side.

If anyone could provide some guidance on this issue, it would be greatly appreciated.

Thank you.

htmlcssalignmentcss-floatmargin

Answer №1

Kaushik

Not entirely certain what you're looking to align, but I recommend using flexbox.

HTML

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: center;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

You can also experiment with replacing justify-content: center; above with:

 justify-content: space-around;

OR 

 justify-content: space-between;

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

JavaScript/CSS memory matching game

Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...

javascriptcss

Add a fading transition feature to images that are loaded at a later time

I used a clever technique to create a blur effect by loading a small, lightweight image first. Once the main background image is loaded, it swaps out the 'data-src' with the actual image. However, I am facing an issue with the abrupt transition, ...

javascripthtmlcssimagedeferred

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

jqueryhtmlcssdraggable

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

javascriptcsshtml-tableexpandable

The issue with style.background not functioning in Internet Explorer is causing complications

I am currently developing a JavaScript game that involves flipping cards. However, I have encountered an issue with the style.background property. It seems to be functioning correctly in Chrome but not in Internet Explorer. Here is the problematic code sn ...

javascripthtmlcssinternet-explorer

I'm looking to add a price ticker to my html webpage. Does anyone know how to do this?

PHP Code <?php $url = "https://www.bitstamp.net/api/ticker/"; $fgc = file_get_contents($url); $json = json_decode($fgc, true); $price = $json["last"]; $high = $json["high"]; $low = $json["low"]; $date = date("m-d-Y - h:i:sa"); $open = $json["open"]; ...

javascriptphpjqueryhtml

When using a jQuery function, remember to always return false

I'm currently developing a forum and looking to implement client-side form validation. However, I'm unsure about how to validate the form before submission. I've tried using an 'on' function, but I need a way to notify the user if ...

jqueryhtmlcodeigniter

How do I create a notification when the div reaches 100% alignment on the left side using Javascript?

Is there a way to receive an alert when the div with the class name "earth" reaches 100% on the left side, without using jQuery? I attempted to utilize setTimeout but I am looking for an alternative method that does not rely on time, but rather on positi ...

javascriptcss

New HTML output is displaying strangely when using jQuery AJAX

My jQuery AJAX function retrieves new HTML content from a PHP script. The PHP script is functioning correctly and sending back the accurate HTML to jQuery. However, when I utilize the html() function, the displayed HTML is incorrect. To verify the returned ...

jqueryhtmlajax

Activate a Dropdown Menu by Clicking in a React Application

I have a collapsible feature where you can click to expand or collapse a dropdown. Currently, the dropdown can only be clicked on where the radio button is located. I want the entire area to be clickable so that users can choose the dropdown by clicking an ...

javascripthtmlcssreactjsmaterial-ui

Having trouble retrieving the ID of a button?

I'm attempting to retrieve the ID of a button, but I seem to be getting the ID of the surrounding div instead. This is not the desired outcome. Here's my current approach: HTML <div class="container container-about container-login"> ...

javascriptjqueryhtml

The issue of pseudo elements not functioning properly in Material-UI makeStyles with React.js has been a frustrating

The use of pseudo elements in Material-UI makeStyles is not functioning correctly. innerBox: { borderRadius: "10px", background: "#fff", boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.36)", maxHeight: "50px", "& ...

cssreactjssassmaterial-uiroot

Combine going to an anchor, performing an AJAX request, and opening a jQuery-UI accordion tab all within a

My goal is to have the user click on the hyperlink below, which will (1) anchor to #suggestions, (2) navigate to the url suggestions.php?appid=70&commentid=25961, and (3) open the jquery-ui accordion #suggestions. However, I am facing an issue where c ...

javascriptphpjqueryhtmlajax

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

javascriptjqueryhtmlcss

What is the best way to show HTML code from an HTML file in a Vue template?

I need help showcasing the HTML code from an external file in a Vue component template. <template> <div class="content"> <pre> <code> {{fetchCode('./code/code.html')}} & ...

javascripthtmlvue.jsfilereader

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

After adding new menu separators, the alignment of my social media icons has been thrown off and I need them to be centered. I'm not sure why this happened or how to fix it. I attempted to add some CSS but had no success. My website can be found at . ...

htmlcsswebiconsalignment

The <hr> tag is not displaying properly within the <option> element

I'm facing an issue with a selection element in my Vue project <div class="resultContainer"> <section> <option class="resultBtn" v-for="exchange in finalExchanges"> {{exchange}} <hr></option> </section> ...

htmlcss

Is it necessary to restart the IIS Site when altering the contents of index.html?

I am currently working on updating a website that runs on a Custom Designed CMS with files using the .asp extension. The site seems to be quite dated and is hosted on an IIS Server, which I do not have direct access to. The user has requested some changes ...

htmlcssiiscontent-management-system

What is the reason behind getComputedStyle having visibility set to visible?

What is the reason behind getComputedStyle always returning element visibility as visible even when no explicit visibility has been set? For instance: getComputedStyle($('#block1')[0],null).visibility; --- "visible" Meanwhile: $('#block1&a ...

javascriptcssgetcomputedstyle

A search form utilizing prepared statements in mysqli

Well met again, everyone. I recently reached out for help on improving some messy code I had put together, and the response was swift. Thank you for that! You can find the original question thread here: PHP - Search database and return results on the sam ...

phphtmlmysqli