How to align several DIVs within a container with an unspecified size

I have several blue rectangles with known dimensions (180 x 180 px) within a container of unknown size.

<html>
         <head>
             <style>
                 @import url('http://getbootstrap.com/dist/css/bootstrap.css');
                 .content {
                     border:1px solid black;
                     background-color: grey;
                     overflow:hidden;
                     text-align:center;
                 }
                 .block {
                     width: 180px;
                     height: 180px;
                     border: 1px solid black;
                     background-color:blue;
                     margin: 0 5px 5px 0;
                     float:left;
                 }
             </style>
         </head>

         <body>
            <div class="row">
                <div class="col-md-6">
                    <div class="content">
                        <div class="block"></div>
                        <div class="block"></div>              
                        <div class="block"></div>
                        <div class="block"></div> 
                        <div class="block"></div>
                        <div class="block"></div>
                    </div>
                </div>
            </div>
         </body>
     </html>

View the code on my example link.

I am looking for two ways to horizontally center these blue squares.

First method:

Second method:

htmlcsstwitter-bootstrapcenter

Answer №1

To make your block element behave as an inline-block, simply add the following CSS:

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
}

Check out this example on jsFiddle to see it in action.

Answer №2

I'm having trouble adding the modified fiddle, so here is the code snippet:

HTML:

<div class="row">
    <div class="col-md-12">
      <div class="content">
          <div class="box">
          <div class="block"></div>
          <div class="block"></div>              
          <div class="block"></div>
          <div class="block"></div> 
          <div class="block"></div>
          <div class="block"></div>
          <div class="block"></div>
      </div>
      </div>
    </div>
</div>

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.content {
  border:1px solid black;
  background-color: grey;
  overflow:hidden;
  text-align:center;
  margin-left:10px;
}

.box {
    width:555px;
    margin:0 auto;
}

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color:blue;
    margin: 0 5px 5px 0;
    display:inline-block;
    float:left;
}

Answer №3

If you want to see the first method in action, check out this fiddle:

http://jsfiddle.net/61RtF/9876/

To ensure the blocks are properly centered, I included an additional div. Here's the updated styling for the blocks:

.block {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    background-color: red;
    margin: 0 5px 5px 0;
    display: inline-block;
    float: left;
}

As for the new "box" class I introduced, here is its styling:

.box {
    width: 555px;
    margin: 0 auto;
}

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

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

Designing a charcoal square div featuring a see-through circular element at its center

I'm working on a design concept that involves creating a square div with a transparent circle in the center. The idea is to have an image as the background, with the transparent circle acting like a window through which the background image can be see ...

jqueryhtmlcss

When using BeautifulSoup, there may be instances where the table element is not always detected, resulting in a 'NoneType' error being returned on occasion

Hello everyone, I am trying to retrieve accurate daily temperatures from www.wunderground.com and encountering the 'NoneType' error occasionally. For instance, the code below attempts to fetch the temperature data from March 1 to March 5, 2020. S ...

pythonhtmlseleniumbeautifulsoupnonetype

Is there a way to refresh a webpage without the need to reload it

Imagine a scenario where a tab on a website triggers the loading of a specific part of the webpage placed within a div. For example, clicking on a tab may trigger the loading of a file named "hive/index.php". Now, if a user selects an option from an auto ...

javascriptjqueryhtml

Using Javascript to select a radio button in a form depending on the value entered in a text box

I have a form that interacts with a Google Sheet to insert and retrieve data. For instance, the form contains two radio buttons: <input id="Rdio_1" name="RdioSelect" type="radio" class="FirstCheck" value="1" onchange="RadioValInsert ()"/> < ...

javascripthtml

Send an AJAX parameter and retrieve it on the expressjs server side of the application

It seems like there's a crucial piece missing here. Let's begin with an AJAX call that can be executed in the <script> tag to send data to the backend. It might look something like this: function changeDom(){ console.log('connectin ...

htmlnode.jsajaxexpress

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

csssassscale

Is there a way to programmatically click on an href link in Firefox? The method that is typically used in Internet Explorer

http://jsfiddle.net/HVGre/1/ - check out this test link. I have a link in my HTML code that needs to be clickable dynamically. While it functions well with the .click() method in Internet Explorer, it fails in Firefox. Unfortunately, changing the link to ...

javascriptjqueryhtmlfirefox

I need to implement a div-based dropdown with a scrollbar in JavaScript and CSS to prevent it from extending beyond the screen. Additionally, the use of struts is essential in this implementation

Dealing with a dynamically populated div-based dropdown can be tricky, especially when it extends beyond the screen's limits and hides entries. This is an inherited application that lacks support, leaving me to handle it without the necessary expertis ...

javascriptjqueryhtmlcss

How can one determine the most accurate box-shadow values?

I am trying to extract the precise box-shadow parameters from a CSS style rule generated by the server. My main focus is determining whether the element actually displays a visible shadow or not. There are instances where the shadow rule is set as somethi ...

javascriptcss

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

Deactivate hover effects and media queries for Material UI controls in all states

Since I am using a touch-capable monitor, I noticed that hover styles are not showing up on any controls. Specifically, when I hover over a Material UI button, I see the following styles: https://i.stack.imgur.com/uwBpt.png Is there a way to disable all ...

cssreactjsmaterial-ui

Is there a way to eliminate the underline in TextField components in Material-UI?

Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation. ...

cssreactjsmaterial-ui

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

javascriptjqueryhtmldynamic-textdynamic-image-generation

How can I submit a form using ajax and retrieve the data as an array?

Hey there, I need some help on how to submit a form and receive data in the form of an array like this: { "notes":'some notes', "validUntil": '12/12/2015', "status": 1, "menuItemName": "HR Section", "menuItemDesc": "gggg" } Here is th ...

javascriptjqueryhtmlajax

I'm curious if there is a method to validate HTML elements within AngularJS. You can check out my app on Plunker [here](https://jsfiddle.net/4jttdczt/)

I'm a newcomer to angularjs and I am attempting to test HTML elements, but my tests are failing. Specifically, I would like to test the value or text contained within an HTML element. Can anyone provide guidance on how I can achieve this? Below is my ...

htmlangularjsunit-testingjasminekarma-runner

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...

htmlcsstypography

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

javascriptjquerycss

Error encountered while parsing JSON data for dynamic charts in Chart.js

I am currently in the process of constructing dynamically generated graphs utilizing technologies such as Chart.js, jQuery, JSON, Mustache.js, and Twitter Bootstrap. All the data required for these graphs is stored within a JSON file, which is then used i ...

jqueryjsontwitter-bootstrapchart.js

Formatting HTML Output Using PHP

Looking to format html output sourced from a database using php and facing an issue: Desired Format: ... <li> <div class="row-wrapper"> <div class="some-class-1">ARRAY-ELEMENT-1</div> <div class="some-class-1" ...

phphtmlarrays