Menu icon Foundation
Centering a Button Group

What is the best way to center a button group?

centerbutton group

What is the best way to center a button group?

This post has been closed. No new replies can be added.

Jordan Warren almost 6 years ago

Hi Joe,

The method below is fairly straightforward:

<div class="row">
  <div class="large-6 large-centered columns">
    <ul class="button-group even-3">
      <li><a href="#" class="button">Button 1</a></li>
      <li><a href="#" class="button">Button 2</a></li>
      <li><a href="#" class="button">Button 3</a></li>
    </ul>
  </div>
</div>

Joe Workman almost 6 years ago

How did you even know about the even classes? I searched through the docs to see where I missed then but they are no where to be found!

Rafi Benkual almost 6 years ago
Maarten Tibau over 4 years ago

@Rafi

You say that the "even" class is mentioned in the Grid section? But when I surf to the link you've posed in your comment, I don't see anything mentioned about the "even" classes.

It is mentioned on the "Button Groups" page, under the section "Advanced".
URL: http://foundation.zurb.com/docs/components/button_groups.html#advanced

Advanced

Adding an even class with the specified number of buttons in that group allows the button group to evenly expand to the edges of its container. With Foundation classes you can use the even class up to even-8.

Rafi Benkual over 4 years ago

Ya you are right. A lot has changed since this post was created :)