Solution 1 :

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.

Solution 2 :

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>

Problem :

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>

Comments

Comment posted by epascarello

So why is it using

Comment posted by How to align a

to the middle (horizontally/width) of the page

Does this answer your question?

Comment posted by warren8114

It says in center now, but when the browser is adjusted, the page stays in the same way without aligning automatically.

Comment posted by warren8114

Do you have any suggestion to fix that?

Comment posted by cela

@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?

Comment posted by warren8114

I added this flex-wrap: wrap; and it worked. Thanks for your help guys.