Question

我在div中有4个社交媒体按钮，我想平均分配它们但我无法弄清楚如何？

CSS

.socialbuttonstop {
    height: 150px;
    width: 35px;
    margin-left: 915px;
    position: absolute;
}

HTML

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

Answer 1

我会在图像周围放置一个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>

<强> CSS

.socialbuttonstop {
  height: 150px;
  width: 35px;
  margin-left: 915px;
  position: absolute;
}

.social_btn {
  height: 25%;
}

Answer 2

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

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

CSS：

ul {
  height: 150px;
  width: 35px;
  margin-left: 915px;
  position: absolute;
  display: block;
}
ul li {
  display: block;
  width: 35px;
  height: 35px;
}
ul li a {
  display: block;
  background-image: url(facebookSmall.png) no-repeat center;
}
  ul li a span {
  display: none;
}

快速解释。基本上，无序列表告诉浏览器或盲人，它是一个列表 - 它是什么。这是一个社交媒体按钮列表。

锚点允许用户点击并转到您的Facebook / Linked In页面，而span标签可让您向Google /搜索引擎和盲人提供有用的文本。

当然，你仍然可以使用你拥有的原始HTML代码但是至少应该将alt属性应用于图像并考虑将它们与父锚点链接。

我认为这足以让您入门。我认为对我（或其他任何人）来说，给你完整的代码是不公平的。这就是编码之美！解决问题。

Answer 3

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

<强> HTML

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

<强> CSS

#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;
}

然后使用没有任何填充的图标制作PNG文件

Answer 4

我只能想到填充的使用：

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

<强> CSS ：

    .imagePadding
    {
        padding: 10px;
    }

Answer 5

对于垂直居中的块，请检查以下小提琴http://jsfiddle.net/L4su9/3/

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

如何在div中平均分配4个图像？

5 个答案: