Horizontal align center of responsive div box containers

I have a single Div that is set to 80% width and I want to place Boxes inside it. However, I need the Boxes to be centered regardless of the outer div's width.

.kachel_wrapper {
margin: auto auto;
width:80%;
background:orange;
min-height:450px;
margin-top:70px;
}

.kachel {
height:180px;
width:180px;
margin-top:20px;
float:left;
margin: auto auto;
margin-top:15px;
margin-left:10px;
background:#6e7176;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>

</div>

Can anyone help me with this issue? How can I ensure that the Boxes are always centered within the specified width?

htmlcss

Answer №1

To achieve the desired layout, you can make the .kachel divs display as inline-block and align the .kachel_wrapper to the center using text-align:center;:

.kachel_wrapper {
  margin: auto auto;
  width: 80%;
  background: orange;
  min-height: 450px;
  margin-top: 70px;
  text-align: center;
}
.kachel {
  height: 180px;
  width: 180px;
  margin-top: 20px;
  margin-top: 15px;
  margin-left: 10px;
  background: #6e7176;
  display: inline-block;
}
<div class="kachel_wrapper">
  <div class="kachel"></div>
  <div class="kachel"></div>
  <div class="kachel"></div>

</div>

Answer №2

If you're unsure about whether to center the divs vertically or horizontally, here's a helpful tip. For horizontal alignment, follow @Jacob Gray's suggestion. However, if vertical centering is what you're after, simply remove the float: left; property from the .kachel class and include display: block;. To achieve perfect centering, add margin-left: auto; and margin-right: auto;:

.tile_wrapper {
  margin: auto auto;
  width: 80%;
  background: orange;
  min-height: 450px;
  margin-top: 70px;
}

.tile {
  display: block;
  height: 180px;
  width: 180px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 10px;
  background: #6e7176;
}
<div class="tile_wrapper">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></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

A New Approach to Initializing Web Pages in ASP.NET (with a Surprising Twist)

Well, I've encountered quite the puzzling issue with a project I'm working on (it could even make it to the Daily WTF), and I'm hoping for some help in finding a solution. (Apologies in advance for the lengthy explanation...) About a month ...

.netasp.netjavascripthtml

Switching up the toggle button for the bootstrap navbar in a React application

Looking to customize the toggler in React, either by completely changing it or just adjusting the color. Tried solutions from various sources but haven't had any success. 5 Years Ago 1 Year Ago 1 Month Ago The code appears crossed out in dev tools ...

cssreactjsbootstrap-4

Tips for sending PHP variables together with a Typeahead variable

I have simplified this code as much as possible. I have a typeahead variable that is functioning correctly. However, I also need to pass two unrelated variables $php_var1 and $php_var2 along with the typeahead variable. These PHP variables are initialized ...

javascriptphphtmlajax

How about linking together CSS3 animations?

Incorporating various classes to animate different elements on my webpage has been my latest project. On page load, I use addClass with jQuery to include these classes. I've been contemplating if there is a method to chain this process. For example, ...

jquerycss

Refreshing HTML Form upon Submit using JavaScript

I've been searching through various discussions without any luck, but I'm encountering an issue with a form that successfully submits data to a Google Sheet, yet the input fields retain their content after submission. Here is the code: <form ...

javascripthtmljsonforms

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

The CSS selector seems to be malfunctioning

I am facing an issue with calling HTML elements from CSS using CSS selectors. It's strange that the class selectors work fine, but I'm unable to select the elements directly from CSS. Therefore, I had to assign them classes. What I aim to achiev ...

htmlcsscss-selectors

Ways to manage intricate HTML tables using Beautiful Soup

Currently, I am facing an issue while loading an HTML file into a data frame using BeautifulSoup. The table I am parsing contains a nested table in every row, and I am unsure of how to handle this situation as it is resulting in an AssertionError. The prob ...

pythonhtmlbeautifulsoup

Updating hyperlinks from dynamic php links to stable static links

I have a script that predominantly uses absolute addressing, but now I need to switch to relative addressing. The problem I'm encountering is when trying to change the links in PHP from: <link href="<?php print $theme; ?>style.css" type="tex ...

phphtml

What is the most efficient way to dynamically alter the position of a div element within an HTML document using

In a scenario where a parent div contains multiple child divs, it is required that one particular child div named .div_object_last always stays at the end. Below is an example setup : HTML <div class="div_parent"> <div class="div_object"> ...

javascriptjqueryhtml

How can I use appendChild to place two different elements into a single div?

While exploring similar questions on this topic, I have unfortunately not come across a solution that works for me. My challenge is trying to insert two a elements inside of a newly created div element using appendChild. However, I am unable to append them ...

javascripthtmlcsstypescript

Stop Internet Explorer from automatically scrolling when it gains focus

Please access this fiddle using internet explorer (11): https://jsfiddle.net/kaljak/yw7Lc1aw/1/ When the page loads, the <p> tag is focused and Internet Explorer slightly scrolls the element so that the table border becomes invisible... document.qu ...

javascripthtmlcssinternet-explorer

Using fingerprint authentication within an Android application to secure access to a web page

I'm exploring the idea of creating a wrapper application to automatically login to a webpage that requires authentication, as entering credentials on mobile can be tedious. I am the only user and I want to utilize saved credentials and the fingerprint ...

androidauthenticationhtmlfingerprint

Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me. I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the a ...

htmlcssshopify

OpenWeatherMap API call failing - not visible in Network tab of Console

I am facing an issue with my API call while trying to retrieve temperature data for a specific city. I am unsure if the problem lies with my API key or the code itself. Can you please provide guidance on how I can resolve this issue? Upon entering the city ...

htmlcssreactjsopenweathermap

Obtaining only a portion of the text when copying and editing it

I have a React application where I am attempting to copy text from an HTML element, modify it, and then send it back to the user. I have been successful in achieving this, but I am facing an issue where even if I select only a portion of the text, I still ...

javascripthtmlreactjs

When I click on the event target, it selects the button within the span. What is the next step I should take

I have a button element that contains a span, and I want to extract the value associated with the button when it is clicked. However, if I click on the span inside the button, I am unable to retrieve the desired value because the event target points to the ...

htmlvue.jsbuttonvue-component

An hour ago, the Python and Selenium code was functional, but now it has suddenly ceased to work

Hello to all fellow community members, I recently attempted to locate the next button in Google search, specifically on the bottom right corner. Here is the HTML code snippet that pertains to this: <td aria-level="3" class="d6cvqb" ...

pythonhtmlseleniumbuttonxpath

What is the best way to select the destination folder for output in Webpack?

Whenever I run webpack using "webpack --mode development", it generates a dist folder and places the bundle.js file inside it. My aim is to have it created and placed in the same directory instead. How can I achieve this? module.exports = { entry: " ...

javascripthtmlwebpack

Using loops in Sass mixins causes errors

I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...

csssasscompass-sassmixins