How to put this Div in center?

Question

Alignment of this div is floating on the left side but I want that to be in center on on desktop browser and in mobile browser too.

It floats on left on desktop browser. It floats on left on mobile browser.

I just want that to be in center.

<style>
div.logolist {
    float: left;
    margin: 20;
}
</style>
<div>
    <div class="logolist">
        <img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
        <p style="text-align:center;">Secure</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
        <p style="text-align:center;">Guarantee</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
        <p style="text-align:center;">Trust</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
        <p style="text-align:center;">Satisfaction</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
        <p style="text-align:center;">Refund</p>
    </div>
</div>

Does this answer your question? [How to align a
to the middle (horizontally/width) of the page](https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page) — cela, Jun 15 '20 at 16:42

cela · Answer 1 · 2020-06-15T16:39:46.000

As another answer mentions, Flexbox is the modern option for laying out data and aligning it. In this case, Flexbox would be the better option, but this is without Flex.

First there is no need for float: left. You can replace with display: inline-block. margin: 0 auto with a width will center the container inside the page. You then add text-align: center to center the content inside the container <div>.

div.logolist {
  display: inline-block;
}
.container {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

<div class="container">
    <div class="logolist">
        <img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
        <p>Secure</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
        <p>Guarantee</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
        <p>Trust</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
        <p>Satisfaction</p>
    </div>
    <div class="logolist">
        <img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
        <p>Refund</p>
    </div>
</div>

score 0 · Answer 2 · answered Jun 15 '20 at 16:32

float is designed to move an element to the side and let content that follows it flow up beside it.

It is a terrible tool to try to use for any other kind of layout.

For a long time, it was about the only tool we had for layout, but we've had Flexbox (for single dimension layouts) for years and support for Grid (for two dimension layouts) has good support these days.

Use Flexbox to lay the elements out.

.flex-container {
  display: flex;
  justify-content: center;
}

.logolist {
  text-align: center;
}

<div class="flex-container">
  <div class="logolist">
    <img src="https://i.imgur.com/gCNG37l.png" width="100" height="100" alt="Screen 2">
    <p>Secure</p>
  </div>
  <div class="logolist">
    <img src="https://i.imgur.com/Vc8mFJS.png" width="100" height="100" alt="Screen 3">
    <p>Guarantee</p>
  </div>
  <div class="logolist">
    <img src="https://i.imgur.com/lc7YSqS.png" width="100" height="100" alt="Screen 3">
    <p>Trust</p>
  </div>
  <div class="logolist">
    <img src="https://i.imgur.com/MupBAPH.png" width="100" height="100" alt="Screen 3">
    <p>Satisfaction</p>
  </div>
  <div class="logolist">
    <img src="https://i.imgur.com/vGZi5RJ.png" width="100" height="100" alt="Screen 3">
    <p>Refund</p>
  </div>
</div>

Also, consider representing you list using actual list markup (ul/ol/li) instead of divs. Divs are generic block elements that should only be used as a last resort if no other HTML element has semantics that describe your content.

It says in center now, but when the browser is adjusted, the page stays in the same way without aligning automatically. — warren8114, Jun 15 '20 at 16:37
@warren8114 we would have to see more of your code. Based on the code in your current answer, it is working. Is it not centering in really small viewports? — cela, Jun 15 '20 at 16:56
I added this flex-wrap: wrap; and it worked. Thanks for your help guys. — warren8114, Jun 15 '20 at 17:11

How to put this Div in center?

2 Answers2