How to put this Div in center? [duplicate] - html

Question

This question already has answers here:
How do I center floated elements?
(12 answers)
Closed 2 years ago.
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>

Answer 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.

Answer 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>