Html 如何在一个div中平均间隔4个图像？

我在一个div中有4个社交媒体按钮，我想平均分配它们，但我不知道如何分配它们

CSS

HTML

---

我会在图像周围放置一个div，并将div的高度设置为25%

HTML

<div class="header">
  <div class="headercontent">
    <div class="socialbuttonstop">

      <div class="social_btn">
        <img src="Images/facebooksmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/twittersmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/googlesmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/linkedinsmall.png"/>
      </div>

    </div>
  </div>
</div>

<div id="social">
    <img id="twitter" />
    <img id="facebook" />
    <img id="linkedin" />
</div>

---

从语义上讲，您应该使用无序列表设置HTML：

<ul>
  <li class="facebook"><a href="#"><span>Facebook</span></a></li>
  <li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>

快速解释。基本上，无序列表会告诉浏览器或盲人它是一个列表——事实就是这样。这是一个社交媒体按钮列表

锚允许用户点击并进入你的Facebook/Linked In页面，而span标签允许你向谷歌/搜索引擎和盲人提供有用的文本

当然，你仍然可以使用原来的HTML代码，但是你至少应该把代码<代码> ALT/COD>属性应用到图像中，并考虑将它们与父锚连接起来。

---

我认为这已经足够让你开始学习了。我认为我（或其他任何人）给你完整的代码是不公平的。这就是编码的美妙之处！解决问题。

如果您的容器div是固定宽度，我通常会这样做，假设48x48个图标：

HTML

<div class="header">
  <div class="headercontent">
    <div class="socialbuttonstop">

      <div class="social_btn">
        <img src="Images/facebooksmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/twittersmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/googlesmall.png"/>
      </div>
      <div class="social_btn">
        <img src="Images/linkedinsmall.png"/>
      </div>

    </div>
  </div>
</div>

<div id="social">
    <img id="twitter" />
    <img id="facebook" />
    <img id="linkedin" />
</div>

---

然后制作一个只包含图标的PNG文件，不带任何填充

我只能想到填充的用法：

HTML：

    <div>
        <img class="imagePadding" src="Images/twittersmall.png"/>
        <img class="imagePadding" src="Images/twittersmall.png"/>
        <img class="imagePadding" src="Images/googlesmall.png"/>
        <img class="imagePadding" src="Images/linkedinsmall.png"/>
    </div>

    .imagePadding
    {
        padding: 10px;
    }

---

对于垂直居中块，请检查以下小提琴

---

你怎么能在一个35像素宽的div中分隔4幅图像？垂直分隔。@FabrizioCalderan我认为OP意味着垂直分隔。SN1Dan，考虑到你有一个固定的宽度和高度，你可以简单地尝试错误地将边距应用到你的图像上，直到它按你想要的间距排列为止……这非常有效，非常感谢！“但它把我的标识压了下来？”很高兴能帮上忙

#social {
    width: 154px;
    height: 48px;
}

#social img {
    width: 48px;
    height: 48px;
    float: left;
    margin-right: 5px;
    background-image: url('icons.png');
    background-position: 0px 0px;
}

#social img:last-child{
    margin-right: 0px;
}

#social img#twitter {
    background-position: -48px 0px;
}

#social img#facebook {
    background-position: -96px 0px;
}

    <div>
        <img class="imagePadding" src="Images/twittersmall.png"/>
        <img class="imagePadding" src="Images/twittersmall.png"/>
        <img class="imagePadding" src="Images/googlesmall.png"/>
        <img class="imagePadding" src="Images/linkedinsmall.png"/>
    </div>

    .imagePadding
    {
        padding: 10px;
    }

.socialbuttonstop 
{
    height: 150px;
    width: 35px;
    position: absolute;
    top:50%;
    margin:-75px 0 0 0;
    /* negate top pixels =-"total height/2" */
    background:#000;
}