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

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

I'm attempting to transfer the textbox value from Page-1 to Page-2 using the code below, but I am encountering difficulties. Page-1.html <div > <div style="height: 400px"> <h2>Partial view-1</h2> <p> ...

c#htmlangularjsasp.net-mvcangular-ui-router

Changing the Style Sheets on the Fly

I have designed a grid of 5x5 boxes. My goal is to be able to click on a link and have that specific link change color after it has been clicked (a:visited) - one at a time. Unfortunately, my current code changes the color of all the links instead of just ...

jquerycssdynamichyperlink

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

htmlangulartypescriptangular-ng-ifangular-pipe

Issues with Node JS app's handling of php mailer code

I've made a basic website using the Node JS framework and included a php mailer for handling the contact form. Unfortunately, I'm facing issues getting it to function properly. Could it be possible that there is an underlying problem with Node JS ...

javascriptphphtmlnode.jsphpmailer

Insert code into the notes section of Pug

Need help inserting a script into a comment on Pug? I have two scripts that need to be added to my website: <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http ...

htmlexpresspug

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

javascripthtmlcss

Issues with transferring object data from JavaScript to a Web API

I am facing issues while attempting to transfer a file from my local machine to SharePoint using JavaScript to ASP.NET MVC Web API call. I continuously encounter errors such as Type error, resource not found, etc. Is there anyone who can provide assistance ...

javascriptajaxhtmlfile-uploadasp.net-web-api

CSS will only be visible if it is enclosed within the <style> tag

While creating a view, I noticed that my CSS is not being displayed unless it's placed inside a <style> tag. I've tried using !important without success, as well as utilizing the selector .container-fluid > .row > .d-flex > .out_pr ...

cssbootstrap-4

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Check out my jsFiddle code below: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363882,131.044922), map: map, title:"Hello World!", icon: CanvasCrear("hola", 15) ...

javascriptcsshtmlgoogle-mapscanvas

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: {'AAPL':['Apple Inc ...

pythonhtmlcssselenium

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

jqueryhtmlcsstwitter-bootstrap

Generating HTML table rows dynamically from objects using Angular's ng-repeat functionality

In my Node-RED setup, I am utilizing the HTML angular code within a "template" node. Within my system, I have an object that consists of circuit boards distinguished by serial numbers. Each circuit board is equipped with two channels, each having its own ...

htmlangularjsobjectnode-red

Can one utilize Javascript to write in plain text format?

Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...

javascriptjqueryhtmlcssdns

Enhance your WooCommerce shopping experience by incorporating a variety of personalized checkout fields organized into two distinct

I have implemented custom code to create unique checkout fields based on the number of products in a customer's cart. Each product requires 4 customized checkout fields, displayed in two columns side by side. The expected result is as follows: co ...

phpcsswoocommercecheckoutcustom-fields

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for. <table> <th >Number</th> <th >Merchant Name</th> ...

htmlcssangular

"Implementation of Google+ button causing the appearance of a horizontal scrollbar

Adding Facebook and Twitter sharing buttons was easy, but now I'm having trouble with Google+. No matter where I place the code on my page (using a Bootstrap grid), it always adds 2-3 pixels on the right side, creating a horizontal scrollbar: <div ...

javascripthtmlcsstwitter-bootstrapgoogle-plus-one

Whenever I attempt to display certain HTML files in Django, I encounter an error message stating: "NoReverseMatch at / Reverse for 'it_languages' not found."

Every time I attempt to display a HTML file in my Django project, an error pops up preventing me from accessing the localhost page. The exact error message I receive is: The error is: NoReverseMatch at / Reverse for 'it_languages' not found. &apo ...

pythonhtmldjango

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

javascriptcssbackground-colordivision

What is the process for changing the output paper size to A4 in React Native (expo android)?

Using React Native to develop an Android app for billing purposes, I encountered an issue with the output paper size being 216mmX279mm instead of the standard PDF size of 210mmX297mm. Utilizing expo-print and printToFileAsync from expo, I aim to achieve a ...

javascriptandroidhtmlcssreact-native

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss