TUTORIAL: SASS / CSS Positioning: Centering Object Groups

Placement in SASS / CSS can be a nightmare.  While centering text is a no-brainer with ‘text-align: center’,  sometimes you need to center something more complex, like a group of photos that are all different sizes.  Unfortunately, float: center is not an option in CSS.  So we’ll need a couple of workarounds.

This workshop will discuss two tried and true methods.  Both methods will require that you first wrap your object(s) in a div.

 

METHOD 1: “Zero Auto”

This method uses margins to center your objects.  Use CSS to set your div to:

div {

display: block;

margin: 0 auto;

}

Be sure to replace ‘div’ above with your div’s identifier.

The reason this method works is that you’re setting your top and bottom margins to zero, and your left and right margins to ‘auto’, which will take the width of your div and create margins accordingly.

Potential problems:

  • Nothing happened.  — Make sure that you gave your div a width.  Otherwise the ‘auto’ command won’t know how to measure out the margins.
  • My items are slightly off-center. — This could be due to preset styles for your HTML elements.  For example, your list items may be offset.  You console inspectorcan change this by going into your UL tag and making the padding 0.  It’s also possible that your nesting has resulted in your div having a left-hand margin.  Identify these types of problems using your console inspector (In Chrome, MAC: command-option-J, then click on the magnifying glass in the top left-hand corner of your console).

METHOD 2: ‘text-align: center’

If you thought this command was only for text, you’re not alone!  Actually, this command will work on the inner contents of any block, centering pictures, divs, or buttons.  This Team Treehouse resource talks about a few basic commands you can use with text-align.

To use text-align, here’s how your CSS should look:

div {

text-align: center;

}

Be sure to replace ‘div’ above with your div’s identifier.

Potential problems:

  • Nothing happened.  — Make sure that you wrapped the objects to center in a div.  Make sure that the code in your CSS is referencing the correct div in your HTML.
  • My items are slightly off-center. — This could be due to preset styles for your HTML elements.  For example, your list items may be offset.  You console inspectorcan change this by going into your UL tag and making the padding 0.  It’s also possible that your nesting has resulted in your div having a left-hand margin.  Identify these types of problems using your console inspector (In Chrome, MAC: command-option-J, then click on the magnifying glass in the top left-hand corner of your console).

 

If problems persist, consult Stack Overflow to get feedback specific to your situation.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s