时间戳

首页 > 解决方案 > 如何把这个 Div 放在中心？

html - 如何把这个 Div 放在中心？

问题描述

此 div 的对齐方式浮动在左侧，但我希望它也位于桌面浏览器和移动浏览器的中心。

它漂浮在桌面浏览器的左侧。它浮动在移动浏览器的左侧。

我只是希望它处于中心位置。

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

标签： htmlcss

解决方案

正如另一个答案所提到的，Flexbox 是布局数据和对齐数据的现代选项。在这种情况下，Flexbox 会是更好的选择，但这没有 Flex。

首先不需要float: left. 您可以替换为display: inline-block. margin: 0 auto具有宽度的容器将在页面内居中。然后，您将内容添加text-align: center到容器内的中心<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>

推荐阅读