Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions?

Check out the code here - https://jsfiddle.net/a6qo6tzL/

Thank you!

<div class="Wrapper">
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
<div class="gridButton">
Test
</div>
</div>
<div style="clear: both;"></div>

CSS

.Wrapper {
display:block;
margin: 0 auto;
width: 100%;
}

.gridButton {
padding: 10px;
background-color: #ff5100;
color: #ffffff;
margin: 5px;
float: left;
width: 250px;
text-align: center;
text-transform: uppercase;
}
htmlcsscentering

Answer №1

The issue lies in the styling of your gridButton, which currently has a

float: left;

To resolve this, replace it with

display: inline-block;

By doing so, your buttons will be able to freely move alongside each other and be centered. Although your wrapper element already spans the full width, you need to instruct it to center its content:

.Wrapper {
  display: block;
  width: 100%;
  text-align: center;
}

You can eliminate margin: 0 auto as it only impacts blocks with a defined width.

.Wrapper {
  display: block;
  text-align: center;
  width: 100%;
}
.gridButton {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px;
  display: inline-block;
  width: 250px;
  text-align: center;
  text-transform: uppercase;
}
<div class="Wrapper">
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
  <div class="gridButton">
    Test
  </div>
</div>
<div style="clear: both;"></div>

Answer №2

Your .Wrapper currently has a width set to 100%, causing it to be full-width and not centered even with the margin: auto property. To resolve this, adjust the width at a higher breakpoint:

@media (min-width: 700px) {
  .Wrapper {
    width: 700px;
  }
}

Additionally, try wrapping your buttons in columns for better layout:

.cell {
  float: left;
  width: 50%;
}

You can view the updated version on JSFiddle.

Answer №3

Implementing flexbox:

.Container {
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100vw;
}

See the demonstration here

I have also updated the width to utilize viewport units

Answer №4

Check out this link to see if it meets your needs https://jsfiddle.net/Explorer/832adk34/

.Container {
  display:flex;
  margin: 0 auto;
  width: 100%;
    border:1px solid black;
}

.buttonGrid {
  padding: 15px;
  background-color: #4589ff;
  color: #ffffff;
  margin: 7px auto;
  /*float: left;*/
  width: 300px;
  text-align: center;
  text-transform: uppercase;
}

Answer №5

Does this meet your requirements?

.Container {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.buttonGroup {
  padding: 10px;
  background-color: #ff5100;
  color: #ffffff;
  margin: 5px;
  width: 250px;
  text-align: center;
  margin: auto;
  text-transform: uppercase;
}

You had been utilizing the float:left; property, which was hindering the central alignment of the divs.

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

Utilizing Cache Features in the XDK Application Framework API

I recently posted a question in the Intel Developer Zone forum for XDK, but unfortunately have not received any answers yet. So I decided to seek help here: My project involves creating a simple HTML5-only periodical website that will be packaged as a sta ...

htmlmobileintel-xdk

Does the value of an Angular reactive form control only reflect what the user inputs?

I am working with a reactive form where I need to extract values and assign them to a variable defined in an interface. The form is populated using the Google Places API, which disables user interaction with all controls except for the initial address inpu ...

htmlangulartypescriptangular-materialangular-reactive-forms

Guide to setting a dynamic value for an input List property in Angular

How can I render multiple dropdowns in Angular based on the response from an API? Currently, when I retrieve data from the API, I am seeing the same information displayed in both dropdown controls. Is there a way to assign dynamic values to the "list" prop ...

html.netangularjstypescript

Highlight the active page or section dynamically using HTML and jQuery - How can it be achieved?

What am I trying to achieve? I am attempting to use jQuery to dynamically highlight the current page from the navigation bar. Am I new to jQuery/HTML? Yes, please excuse my lack of experience in this area. Have I exhausted all resources looking for a sol ...

javascripthtmljquerycss

Animate with ease upon mouse entry into the div

I have a question about hovering. $(".hover li img").mouseenter(function() { $(".overlay").animate({ left: pixels+"px" }); }); The overlay class is a transparent box around the image, with a red border. I want the border to move when hov ...

javascriptjqueryhtmlcsshover

Is it possible to dynamically alter a CSS property using styled components when an onClick event occurs?

Hey there, I'm pretty new to React and currently exploring styled components for the CSS styling of my components. One of the components I've created is a button called SummonButton: const SummonButton = styled.button` height: 50px; borde ...

javascriptcssreactjsrxjsstyled-components

`Switching between two buttons: A guide`

Here is the codepin: https://jsfiddle.net/magicschoolbusdropout/dwbmo3aj/18/ I currently have a functionality in my code that allows me to toggle between two buttons. When I click on one button, content opens and then closes when clicked again. The same b ...

javascripthtmljquerycss

The onClick event in ReactJs appears to be ineffective when used with a button HTML element

Can someone help me troubleshoot this issue in my ReactJs app? import React from 'react' import '../../../assets/styles/authentication/login.css' import '../../../assets/bootstrap/css/bootstrap.min.css' import { login } fro ...

htmlreactjsonclick

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

javascripthtmlcss

javascript alter css property display to either visible or hidden

I am struggling with a CSS id that hides visibility and uses display: none. The issue arises when I want the element to be visible upon clicking a button, but removing the display:none property is causing design problems due to it being an invisible elemen ...

javascripthtmlcss

Troubleshooting Variances in CSS Layouts on Different Devices

I have been wrestling with a challenging question regarding CSS layouts, and I believe it's time to seek advice from those who may be more knowledgeable in this area. Let's discuss why my current layout is presenting such a headache. Take a look ...

htmlcsslayoutresponsivebox-sizing

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

javascriptjqueryhtmlajaxevents

Risk Score Generating Form

As I work on a comprehensive form, there are 5 sections for users to mark if they qualify (using checkmarks). The form consists of approximately 50 questions in total. Each section carries different weights/points (e.g., Section 1 is worth 1 point each, ...

javascripthtml

Setting up the file structure for customizing Bootstrap with Sass

Hello, I am currently setting up Bootstrap for customization using Sass. After creating an HTML page, I attempted to add my own custom properties to the custom.scss file. Unfortunately, these changes do not seem to affect my page as expected. I followed s ...

htmlcsssassbootstrap-5

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

Obtain the href attribute's value from an HTML document using Javascript

I'm facing an issue here. Currently, I am utilizing Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/) for my project. Now, my goal is to incorporate a Lightbox with multiple thumbnails inside the dropout provide ...

javascriptjqueryhtmlfetch

Dilemma: Overlapping Dropdowns on a Bootstrap Navbar Floated right

When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having tw ...

csstwitter-bootstraptwitter-bootstrap-3

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

javascripthtmlcsssasswebstorm

From where was this color of the navigation bar derived?

As I delve into a site previously worked on by someone else, my task is to recreate the navigation they implemented. However, I am unable to locate in the source code what was used for the navigation background. The challenge lies in the fact that after m ...

htmlcssnav

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml