在 div 之间添加白色 space

Question

我正在重新制作 Google Chrome 主页，但我卡在页面底部有空格的部分。我不能让他们完美。两个图标不在一条直线上。

这是我需要的与我得到的相比

两侧空间太小，中间空间太大。
如果我能以某种方式使中间的空间更小，两侧的空间更大，那么我就可以重现第一张图片

我试过了
justify-content: space-between;
和
justify-content: space-around;
和
justify-content: space-even; 他们不工作

这是我的 html

<div class='mostUsedApps'>
    <div class='row'>
    <div class='youtube rowCell'></div>
    <div class='facebook rowCell'></div>
    <div class='roblox rowCell'></div>
    <div class='Agar rowCell'></div>
    <div class='gmail rowCell'></div>
</div>
</div>

这里是 css

.youtube{
     background-image: url(youtube.png);
}
.facebook{
     background-image: url(facebook.png);
}

.roblox{
     background-image: url(roblox.png);
}

.Agar{
     background-image: url(Agar.png);
}

.gmail{
     background-image: url(gmail.png);
 }


.rowCell {
    width: 256px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
}
.row {
    padding: 120px 0 0 424px;
    height: 112px;
    width: 525px;
    display: flex;
}

知道我该怎么做吗，谢谢 (:

Answer 1

.rowCell {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size:50%;
    background-position:center;
    border:1px solid #000;
    display:inline-block;
    }

Answer 2

我用过justify-content: space-around;css它的工作正常。你设置固定宽度rowdiv，我设置这个width:auto。现在您可以使用这段代码了，希望对您有所帮助。

.youtube{
     background-image: url(youtube.png);
}
.facebook{
     background-image: url(facebook.png);
}

.roblox{
     background-image: url(roblox.png);
}

.Agar{
     background-image: url(Agar.png);
}

.gmail{
     background-image: url(gmail.png);
 }


.rowCell {
    width: 61px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
    background-color: red;
    border-radius: 50%;
background-size: 100% auto;
background-position: center;
}
.row {
    padding: 0;
    height: 112px;
    width: auto;
    display: flex;
    justify-content: space-around;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
}

    <div class='mostUsedApps'>
     <div class='row'>
        <div class='youtube rowCell'></div>
        <div class='facebook rowCell'></div>
        <div class='roblox rowCell'></div>
        <div class='Agar rowCell'></div>
        <div class='gmail rowCell'></div>
    </div>
    </div>

Answer 3

要使内联 div 之间完美居中对齐，您可以在 display: inline-block 个 div 上使用 text-align: center。

div.container {
  text-align: center;
}

div.icon {
  width: 30px;
  height: 30px;
  
  display: inline-block;
  margin: 10px;
  
  background-color: #eee;
  border-radius: 100%;
}

<div class="container">
  <div class="icon youtube"></div>
  <div class="icon facebook"></div>
  <div class="icon gmail"></div>
  <div class="icon site4"></div>
  <div class="icon site5"></div>
  <div class="icon site4"></div>
</div>

在 div 之间添加白色 space

add a white space between divs

html

css

whitespace

spacing