Menu icon Foundation
Center column in a row

How can I center the columns in a row?

centercolumnsrow

How can I center the columns in a row?

Marek Simko over 5 years ago
Rafi Benkual over 5 years ago

@Marek is right, just add the centered class

<div class="row">
  <div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">6 centered</div>
</div>

Max Vi about 4 years ago

The provided solutions don't work.
There's no way the following markup should end up with 2 rows:
HTML
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
<div class="small-3 small-centered columns">3 centered</div>
</div>

Yet it does.

Rafi Benkual about 4 years ago

Hi Max, when you use the centered class, it will center one set of columns in a row. If you have split columns like large-6 large-6, then the second set of columns will wrap to the next row.

Can you explain what you are trying to accomplish so we can help you more?

Glenn Philp over 3 years ago

@Kevin Lewis make sure that you are not using any other elements before the column. For instance, if you do the following centering will break unless you force float:none.

<!-- This will break -->
<div class="row">
    <div class="separator"></div>
    <div class="small-3 small-centered columns">Content</div>
</div>
<!-- This will work -->
<div class="row">
    <div class="small-3 small-centered columns">Content</div>
</div>
<!-- And this will work -->
<div class="row">
    <div class="separator"></div>
    <div class="small-3 small-centered columns" style="float:none !important;">Content</div>
</div>
<!-- And this will also work -->
<div class="row">
    <div class="small-3 small-centered columns">Content</div>
    <div class="separator"></div>
</div>

@Rafi Benkual, what I have been noticing is when developers are using the grid, they don't realize that the column/columns class has a :last-child float:right. Which will override the centered class.

Rafi Benkual over 3 years ago

Hi Glen,
This is how we're using it: http://codepen.io/rafibomb/pen/JGJOKj?editors=110

I'm not seeing the float right happen like you mentioned though. The centered class takes care of that.

You can center two (or more columns) like this:
http://codepen.io/rafibomb/pen/XXgzpw?editors=110

Glenn Philp over 3 years ago

Hey @Rafi Benkual,

I am only guessing the float was the issue based on a previous post in the forum that I inspected.

Rafi Benkual over 3 years ago

@Max Vi @Kevin Lewis Did this help explain it?

Bahadir Balban over 3 years ago

What he was asking (and I came here for the same question) is when you center 2 columns, how can they be automatically centered on the same row?

I add 3 columns, they are centered in the same row. (Like when you type into "centered" text, as you add more characters it remains to be centered.

Glenn Philp over 3 years ago

@Bahadir Balban, it sounds like you want 2 columns centered, like:

<div class="row">
        <div class="medium-6 medium-centered">
               <div class="row">
                      <div class="medium-6 columns"><!-- 50% --></div>
                      <div class="medium-6 columns"><!-- 50% --></div>
                </div><!-- /.row -->
        </div><!-- /.medium-6.center -->
</div><!-- /.row -->

Does this help? Or did I miss understand your question?

Moritz Pfeiffer over 3 years ago

@Glenn Philp

Thank you that was very helpful. It'd be great if this was in the docs. It's obvious now that I see it, but I struggled to come up with this construct.

Ray Foss over 2 years ago

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Add that class next to the row element. Works on all good browsers and Microsoft IE 11.

Jack Walker about 1 year ago

thanks

 

Jack Walker about 1 year ago

thanks

 

Jack Walker about 1 year ago

thanks