Highlighted

Centering odd number of columns in a div

Participant ,
Mar 22, 2018

Copy link to clipboard

Copied

I've searched and tested over and over but nothing really works. I'm trying to center five columns inside a div. Basically, I've got a row of icons with names under each icon that I need to center. If it were 2, 3, 4, or 6 columns I wouldn't be having this issue. But with 5 it shifts all the way to the left and I can't seem to get them to center.

This is a generic html to try and display what I'm talking about. I'm trying to center the sm-2 columns in .CenterIcons. Any help or suggestions would be greatly appreciated.

<div class="container-fluid">

    <div class="row">

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

    </div>

     

    <div class="row CenterIcons">

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>Icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

    </div>

  </div>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Try this:

<div class="container-fluid">

<div class="row CenterIcons text-center">

<div class="col-xl-1"></div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>Icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-1"></div>

</div>

</div>

Views

511

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Centering odd number of columns in a div

Participant ,
Mar 22, 2018

Copy link to clipboard

Copied

I've searched and tested over and over but nothing really works. I'm trying to center five columns inside a div. Basically, I've got a row of icons with names under each icon that I need to center. If it were 2, 3, 4, or 6 columns I wouldn't be having this issue. But with 5 it shifts all the way to the left and I can't seem to get them to center.

This is a generic html to try and display what I'm talking about. I'm trying to center the sm-2 columns in .CenterIcons. Any help or suggestions would be greatly appreciated.

<div class="container-fluid">

    <div class="row">

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

        <div class="col-xl-4"><p>This is the content for Layout P Tag</p></div>

    </div>

     

    <div class="row CenterIcons">

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>Icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

      <div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px;

    max-width: 90px;" alt="Placeholder image">

        <p>icon name</p>

      </div>

    </div>

  </div>

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Try this:

<div class="container-fluid">

<div class="row CenterIcons text-center">

<div class="col-xl-1"></div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>Icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-1"></div>

</div>

</div>

Views

512

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 22, 2018 0
Adobe Community Professional ,
Mar 22, 2018

Copy link to clipboard

Copied

Try this:

<div class="container-fluid">

<div class="row CenterIcons text-center">

<div class="col-xl-1"></div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>Icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png" class="img-fluid" style="min-width: 40px; max-width: 90px;" alt="Placeholder image">

<p>icon name</p>

</div>

<div class="col-xl-1"></div>

</div>

</div>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2018 0
Participant ,
Mar 22, 2018

Copy link to clipboard

Copied

So that working in my blank test file, but when I try to implement it into the actual page everything moves into a straight vertical line and all the way to the left. This is my actual working code (at least a portion of it). The section in bold is what I'm trying to center.

<div id="threatStat">

<div class="well-lg">This is the content inside a normal well. Use class "well-lg" or "well-sm" for large and small well, respectively.</div>

</div>

<div class="container-fluid" id="homeBodyContent">

    <h1>Draw On Our Extensive Expertise</h1>

 

    <div class="row text-center" id="homeIcons">

     

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

        <div class="col-sm-2"><img src="https://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png class="img-responsive" alt="Placeholder image">

          <p>This is the content for Layout P Tag</p>

        </div>

     

    </div>

 

  <div class="row">

  <div class="col-lg-6"></div>

  <div class="col-lg-6"></div>

  </div>

<!--Carousel-->  

  <div class="row">

  <div class="col-lg-6">

    <div id="carousel1" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">

        <li data-target="#carousel1" data-slide-to="0" class="active"></li>

        <li data-target="#carousel1" data-slide-to="1"></li>

        <li data-target="#carousel1" data-slide-to="2"></li>

          </ol>

      <div class="carousel-inner" role="listbox">

        <div class="item active"><img src="Images/Carousel_Placeholder.png" alt="First slide image" class="center-block">

          <div class="carousel-caption">

            <h3>First slide Heading</h3>

            <p>First slide Caption</p>

              </div>

            </div>

        <div class="item"><img src="Images/Carousel_Placeholder.png" alt="Second slide image" class="center-block">

          <div class="carousel-caption">

            <h3>Second slide Heading</h3>

            <p>Second slide Caption</p>

              </div>

            </div>

        <div class="item"><img src="Images/Carousel_Placeholder.png" alt="Third slide image" class="center-block">

          <div class="carousel-caption">

            <h3>Third slide Heading</h3>

            <p>Third slide Caption</p>

              </div>

            </div>

          </div>

      <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

      </div>

 

  <div class="col-lg-6">

  </div>

  </div>

 

</div>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2018 0
Adobe Community Professional ,
Mar 22, 2018

Copy link to clipboard

Copied

Check your code for errors under File > Validate > Validate Current Document (W3C) or go to http://validator.w3.org/nu to get a listing.

HTML code issues will break css layout pretty badly.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2018 1
Participant ,
Mar 22, 2018

Copy link to clipboard

Copied

The only error in my code was a warning that stated: "The type attribute is unnecessary for JavaScript resources."

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2018 0
Adobe Community Professional ,
Mar 22, 2018

Copy link to clipboard

Copied

Are you using Bootstrap 4 (the latest) or Bootstrap 3? 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2018 0
Participant ,
Mar 22, 2018

Copy link to clipboard

Copied

In this particular file it's bootstrap 3. However, I was able to get the code to work when I altered your suggested code just a bit. When I changed the col size to sm or xs they lined up correctly. Yay!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2018 1
LEGEND ,
Mar 23, 2018

Copy link to clipboard

Copied

or cut out the hacking and use of extra redundant code and use flexbox.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0
Adobe Community Professional ,
Mar 23, 2018

Copy link to clipboard

Copied

Or use Bootstrap Offset classes.

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 23, 2018 0