Menu icon Foundation
Centering button-bar in enclosing column div

Annoying problem here - probably a very simple solution that I have not thought of. I am using Foundation V in Wordpress (Joints WP (CSS) base theme).

I am trying to center the button bar (see code) in the enclosing column div.

I can center the text in the button bar, but so far I have not been able to center the button group itself.

Like I said, probably an obvious answer, but I could use a hint here.

Thanks,

Bill

 <div class="small-12 medium-6 large-6 left c6 columns">
       <div class="cat-menu button-bar">
                            <ul id="category-bar" class="text-center round button-group">
                            <li><a href="#" class="small button">Events</a></li>
                            <li><a href="#" class="small button">Exploring Music</a></li>
                            <li><a href="#" class="small button">Influence News</a></li>
                            </ul>
            </div>
</div>
            

         

centering elementsbutton-groupwordpress

Annoying problem here - probably a very simple solution that I have not thought of. I am using Foundation V in Wordpress (Joints WP (CSS) base theme).

I am trying to center the button bar (see code) in the enclosing column div.

I can center the text in the button bar, but so far I have not been able to center the button group itself.

Like I said, probably an obvious answer, but I could use a hint here.

Thanks,

Bill

 <div class="small-12 medium-6 large-6 left c6 columns">
       <div class="cat-menu button-bar">
                            <ul id="category-bar" class="text-center round button-group">
                            <li><a href="#" class="small button">Events</a></li>
                            <li><a href="#" class="small button">Exploring Music</a></li>
                            <li><a href="#" class="small button">Influence News</a></li>
                            </ul>
            </div>
</div>
            

         
Rafi Benkual about 4 years ago

Button groups are float: left; by default. Changing it to float: none; will help

http://codepen.io/rafibomb/pen/ZGRWpZ?editors=110