Menu icon Foundation
How to align grid column contents

How to align the contents of a div tag within grid columns.
In the following dv tag, I have button group which is offset. But I would like the button group aligned to the right within the div tag.

<div class="row" style="background: red">    
    <div class="large-6 large-offset-6 columns" style="background: green">
        <ul class="button-group">
            <li><a href="#" class="button">Add Carrier</a></li>
            <li><a href="#" class="button secondary">Edit</a></li>
            <li><a href="#" class="button secondary">Delete</a></li>
        </ul>
    </div>
</div>
            

         

divcolumnsoffset

How to align the contents of a div tag within grid columns.
In the following dv tag, I have button group which is offset. But I would like the button group aligned to the right within the div tag.

<div class="row" style="background: red">    
    <div class="large-6 large-offset-6 columns" style="background: green">
        <ul class="button-group">
            <li><a href="#" class="button">Add Carrier</a></li>
            <li><a href="#" class="button secondary">Edit</a></li>
            <li><a href="#" class="button secondary">Delete</a></li>
        </ul>
    </div>
</div>
            

         
Rafi Benkual over 5 years ago

You can use css float property to target the button group like http://cdpn.io/itgeE (click edit pen)