NuffsaidM8 NuffsaidM8 - 2 months ago 7
CSS Question

Centering large amounts of divs on the page

So I recently took over operating a website for my school robotics club and am making a few minor changes to the styling. While the creator was very good, he made a few very stupid styling choices that absolutely and completely break when the page is small.

Right now, the page has all of the divs with the main contents have a left side padding of 80px. While this doesn't look off at first, when you get to the bottom of the page you realize the centered text and stuff on the table in one of the divs doesn't fit with the centered graphics on the footer.

I'm trying to rectify this change by centering all the divs and sections that he added to the sight so that they always have equal amount of padding on both sides. I would like to do this with only html and css, but I will work on doing it with JS if I need to.

Right now, the divs that hold all the different parts of content look like this:

<div id="participants-contents" class="row text-left" style="padding-left: 80px">
blah


I looked up this issue and only found one decent answer, which was removing the padding and setting the text align to center using a wrapper div, which would look like this:

<div id="participants-wrapper" style="text-align: center">
<div id="participants-contents" class="row text-left">
blah


While removing the padding does change the text and stuff inside the participants-contents div, by pushing it all the way to the left, the wrapper does absolutely nothing.

Can anyone shed some light on my situation?

I was looking into the calc() funtion in css, in hopes that we could use the width of elements, but alas it doesn't appear such a utility exists.

EDIT: Sorry, I'm not the most proficient with bootstrap.

The main code block I am trying to center is this (school names edited out, replaced with _________):

<section id="news" class="container content-section trans-section text-center" style="position: relative;padding-top: 55px;">
<div class="row"><div class="col-md-offset-4 col-md-4"><h2 class="text-center">Additional Updates & Information</h2><br><div class="line"></div></div></div>
<br><br><br>
<div id="participants-wrapper" style="text-align: center">
<div id="participants-contents" class="row text-left" style="padding-left: 80px">
<div class="col-md-11">
<h2 class="text-left">Updates</h2>
<div class="line-alt"></div>
<div class="row">
<ul style="font-size: 1.6em; font-family: 'Lato'; font-weight: 300;">
<li>The number of SweeperBot matches has been changed from 2 to 3.</li>
<li>SweeperBot matches will run in the morning. Each robot will run through the field once and then initial rankings will be posted. Each robot will then run a second time and rankings will be updated. Each robot will then go through a third and final time.</li>
<li>We are planning on a double elimination format for the SumoBots. Some of the early SumoBot matches will run in the morning concurrently with the SweeperBot matches.</li>
<li>We will release the schedule for the day as we get closer to the date and get a firmer handle on the total number of teams.</li>
</ul>
</div>
<br><br>
<table align="center" class="participants-table table table-striped table-bordered table-condensed" style="border: 1px solid #3c3c3c !important;">
<caption align="top">Schools in Attendance Last Year</caption>
<tr>
<td style="font-weight: 500;">School Name</td>
<td style="font-weight: 500;">Number of SumoBots</td>
<td style="font-weight: 500;">Number of SweeperBots</td>
</tr>
<tr>
<td>_________ High School</td>
<td class="success">3</td>
<td class="success">3</td>
</tr>
<tr>
<td>_________ High School</td>
<td class="success">5</td>
<td class="success">3</td>
</tr>
<tr>
<td>_________ High School</td>
<td class="success">4</td>
<td class="success">2</td>
</tr>
<tr>
<td>_________ High School</td>
<td class="success">4</td>
<td class="success">0</td>
</tr>
<tr>
<td>_________ High School</td>
<td class="success">1</td>
<td class="success">1</td>
</tr>
<caption align="bottom">Will You Participate Next Year?</caption>
</table>
</div>
</div>
</div>
</section>


The styling is in a seperate stylesheet, which I could link if needed, but I would rather not go searching for everything.

Answer

The simplest way to horizontally center an element in Bootstrap is to give its parent the class of text-center and apply display: inline-block to itself. Of course, there are a few other small details to take care of, such as (make sure the childrens' width is smaller than the parents', make sure the left and right margins and paddings are equal, etc...).

There are numerous other ways to center elements. What you are using is, in clean CSS, exemplified in this example:

parent {
  text-align: center;
  /*******************/

  position: relative;
  display: block;
  padding: 1rem;
  margin: 3rem;
  border: 1px solid red;
}

child {
  display: inline-block;
  /*******************/

  width: 50%;
  background-color: rgba(0,0,0,.42);
  color: white;
  padding: .5rem;
}
parent-label {
  position: absolute;
  top: -1.2rem;
  left: 1.2rem
}
parent,child {
  box-sizing: border-box;
}
<parent>
  <parent-label>This is your parent...</parent-label>
  <child>
    ...and this is your child
  </child>
</parent>

As a side note, I strongly advise you to take some time and study the basic principles of Twitter Bootstrap layout-ing, grid system and utility classes before you take over the redesign of a website made using this framework.

It's a smart and reliable framework but I've seen quite a few people fighting it instead of taking advantage of it.