Skip to main content
Inspiring
September 24, 2024
Answered

center content insde a fluid container

  • September 24, 2024
  • 2 replies
  • 720 views

Hi guys, looking for a tutorial on how to center content inside a fluid container, any help would be greatly appreciated!

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Do you mean the social media icons across the top?

    Just place all 4 icons inside 1 auto centered <div> like this:

     

    <div class="container-fluid">

    <div class="row">

    <div class="col-md-8 mx-auto">

    Icon | Icon | Icon | Icon

    </div>

    </div>
    <div>

     

    Hope that helps.

     

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    September 24, 2024

    The so called 'FluidGrid Layouts' from 12+ years ago have long since been abandoned for better, more stable layout approaches that don't rely on Floats and Clearfixes. 

     

    Answers to all layout questions are contained in your HTML & CSS code.  The fastest way for fellow users to help you is for you to post the URL to your online page.

    • What are you trying to center?
    • Do you want the axis centered horizontally (x), vertically (y), or both (x & y)? 

     

    Aligning items:

     

    Nancy O'Shea— Product User & Community Expert
    Inspiring
    September 24, 2024

    thanks so much for the reply. The alignment I'm looking for is horizontal. I'm trying to center the images and 4 columns inside the fluid container. My webSite is ->  https://jeetah.org/

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    September 25, 2024

    Do you mean the social media icons across the top?

    Just place all 4 icons inside 1 auto centered <div> like this:

     

    <div class="container-fluid">

    <div class="row">

    <div class="col-md-8 mx-auto">

    Icon | Icon | Icon | Icon

    </div>

    </div>
    <div>

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    Community Expert
    September 24, 2024

    If the content is contained within a block-level element or inline-block-level element, use margin-left and -right: auto.

     

    For HTML elements, see https://www.w3schools.com/html/html_blocks.asp.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Inspiring
    September 24, 2024

    thnx so much for the tutorial, I will read thru it this weekend when I have more time, looks like an excellent resource