Menu icon Foundation
Create centered inline list flexbox F4A

Sorry about the last question was very late . .

Som im trying to create a basic footer using the new flexbox grid what I have so far is below

Screenshot from 2015 02 21 11 34 36

<div class="grid-block vertical" style="background:#232323;">
    <div class="grid-block">
        <div class="grid-block">
            <div class="grid-content text-center">
                <h3 style="color:white;">Testimonials</h3>
                <p  style="color:white;">Some kind of Testimonials or witty comment will be inserted here, just wire framing at the momment so need something to take up the room</p> 
            </div>            
        </div>
        <div class="grid-block">
            <div class="grid-content">
                <h3 style="color:white;">Left</h3>
                <p style="color:white;">some kind of content will go here maybe a testimonial or something</p> 
            </div>            
        </div>
        <div class="grid-block">
            <style>
                .actions li {
                    display: inline;
                    list-style-type: none;
                    padding-right: 5px;
                }
            </style>
            <div class="grid-block text-center">
                <span class="actions text-center">  
                    <h3 style="color:white;">Socialites</h3>
                    <ul>
                        <li><a href="#"><i class="fa fa-3x fa-facebook-square"></i></a></li>
                        <li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
                        <li><a href="#"><i class="fa fa-3x fa-google-plus-square"></i></a></li>
                    </ul>
                </span> 
            </div>
        </div>            
    </div>
    <div class="grid-block text-center">
        <p style="color:white;">Copyright</p>
    </div>
</div>
            

         

Now the text will all center align or justify and I can play with the format between mobile etc the one thing im having trouble with is the social icon bar.

What I want is for the icons to center horizontally and vertically within their

  • and then within their parent container

    Ive tried . . .
    Inline lIst from foundation - Creates the inline list but no centering
    Block-grif with a wrap around holding them to 3 accross
    padding them out the lot but with no luck

    Any ideas ? why wont Icons line up like text does ?

  • alignlistsgrid-blockblock-gridF4Sf4a

    Sorry about the last question was very late . .

    Som im trying to create a basic footer using the new flexbox grid what I have so far is below

    Screenshot from 2015 02 21 11 34 36

    <div class="grid-block vertical" style="background:#232323;">
        <div class="grid-block">
            <div class="grid-block">
                <div class="grid-content text-center">
                    <h3 style="color:white;">Testimonials</h3>
                    <p  style="color:white;">Some kind of Testimonials or witty comment will be inserted here, just wire framing at the momment so need something to take up the room</p> 
                </div>            
            </div>
            <div class="grid-block">
                <div class="grid-content">
                    <h3 style="color:white;">Left</h3>
                    <p style="color:white;">some kind of content will go here maybe a testimonial or something</p> 
                </div>            
            </div>
            <div class="grid-block">
                <style>
                    .actions li {
                        display: inline;
                        list-style-type: none;
                        padding-right: 5px;
                    }
                </style>
                <div class="grid-block text-center">
                    <span class="actions text-center">  
                        <h3 style="color:white;">Socialites</h3>
                        <ul>
                            <li><a href="#"><i class="fa fa-3x fa-facebook-square"></i></a></li>
                            <li><a href="#"><i class="fa fa-3x fa-twitter-square"></i></a></li>
                            <li><a href="#"><i class="fa fa-3x fa-google-plus-square"></i></a></li>
                        </ul>
                    </span> 
                </div>
            </div>            
        </div>
        <div class="grid-block text-center">
            <p style="color:white;">Copyright</p>
        </div>
    </div>
                
    
             

    Now the text will all center align or justify and I can play with the format between mobile etc the one thing im having trouble with is the social icon bar.

    What I want is for the icons to center horizontally and vertically within their

  • and then within their parent container

    Ive tried . . .
    Inline lIst from foundation - Creates the inline list but no centering
    Block-grif with a wrap around holding them to 3 accross
    padding them out the lot but with no luck

    Any ideas ? why wont Icons line up like text does ?

  • Jason Demitri about 4 years ago

    Oh and the red lines are just so i can see the grid-blocks . . im just playing with templates and layout atm

    Rafi Benkual about 4 years ago

    The last block on the right - I changed it to a grid-content to give it the padding and display properties for content. Then a little CSS to `grow' the list horizontally within the container.

    http://codepen.io/rafibomb/pen/azGNYr

    Jason Demitri about 4 years ago

    Thank you :) had already cheated and used the old inline list and block grid but now using your way much nicer :)