CODEWITHSUNDEEP
htmlcssalignmentcenter
Brandon McPeak
Brandon McPeak

Reputation: 69

Cannot get div to center

I have tried everything to get a div of dynamic width (highlightsContainer) to center within its parent. I think it has something to do with the fact that this div takes up 100% of the parent container width, no matter what I do.

I have tried to set it to inline-block, but that does not fix it. Dev Tools still shows it as taking up 100% of the parent container width. The children of .highlightsContainer are not forcing it to this width.

Here is my markup:

<div class="highlightsContainerWrapper">
   <div class="highlightsContainer">
       <a href="#video">
          <div class="highlightEntry">
              <img src="../img/portfolio/lr/lr-highlight-1.png" />
              <div class="highlightLabel">Mobile Site</div>
           </div>
       </a>
       <a href="#email">
           <div class="highlightEntry">
              <img src="../img/portfolio/lr/lr-highlight-2.png" />
              <div class="highlightLabel">Video Gallery</div>
            </div>
        </a>
        <a href="#social">
            <div class="highlightEntry">
               <img src="../img/portfolio/lr/lr-highlight-3.png" />
               <div class="highlightLabel">jQuery Modals</div>
             </div>
        </a>
        <a href="#blog">
             <div class="highlightEntry">
                <img src="../img/portfolio/lr/lr-highlight-4.png" />
                <div class="highlightLabel">SEO</div>
             </div>
        </a>
    </div>
</div>

And my CSS:

.highlightsContainerWrapper {
    float: left;
}

.highlightsContainer {
    display: inline-block;
    margin: 0 auto;
}


.highlightEntry {
    width: 18%;
    margin: 3% 1%;
    float: left;
    position: relative;
    overflow: hidden;
    border: 1px solid #fcfbe7;
}

Upvotes: 0

Views: 115

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240928

You can do something like this:

.highlightsContainerWrapper {
    float: left;
    width: 100%;
    text-align: center;
}

Works for dynamically generated content. You won't have to set a width on .highlightsContainer

Working jsFiddle demo

Upvotes: 1

Domecraft
Domecraft

Reputation: 1661

To add to the previous comment, this could also work as well without having to have the width be 100 percent each time if you don't want it to be. 

.highlightsContainerWrapper {
   float: left;
   text-align:center;
}

Then you can make the width whatever you want it to be.

Hoped that helped you center the div

Upvotes: 0

Related Questions