Question

我觉得我正在使用的解决方案真正融合在一起并且变得困难。让我知道我可以做得更好，因为我没有完全重建这个：

  <div id="content">
      <div class="blocking"
        <td><a href="https://github.com/kfrncs"><img src="img/github.png" class="social" id="github"></a></td>
        <td><a href="https://twitter.com/kfrncs"><img src="img/twitter.png" class="social" id="twitter"></a></td>
      </div>
      <div class="blocking">
        <td><a href="mailto:kennethpatrickfrancis@gmail.com"><img src="img/gmail.png" class="social" id="gmail"></a></td>
        <td><a href="skype:kennethpatrickfrancis?add"><img src="img/skype.png" class="social middle" id="skype"></a></td>
      </div>
      <div class="blocking">
        <td><a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="img/stackoverflow.png" class="social" id="stackoverflow"></a></td>
      </div>

CSS：

@media only screen and (min-width: 320px) and (max-width: 768px)
{
    .blocking {
        display: block;
        padding: 2vh 25vw 0 30vw;
        margin-left: auto;
        margin-right: auto;
    }
    #github {
        margin-top: 5vh;
    }
    #stackoverflow {
        margin-bottom: 5vh;
    }
    .titleres {
        display: block;
    }
}



@media only screen and (min-width: 768px) and (max-width: 1024px)
{
    .blocking {
        display: block;
        padding: 5vh 20vw 0 24vw;
    }
    #stackoverflow {
        margin-left: 9vw;
    }
}

@media only screen and (min-width: 1024px)
{   
    .blocking {
        display: inline;
    }
}

我希望所有元素都能保持良好的中心状态，在全尺寸显示器上有五行，但是当屏幕较小时，它们可以很好地一起滑动。我无法弄清楚如何让他们在手机大小的屏幕上保持中心。任何完全不同的方式来处理我正在做的事情的例子都会受到赞赏 - 即使最终结果不同。但如果有办法正确调整我想要做的事情，那也会受到赞赏。

编辑：http://kennethfrancis.com

Answer 1

您需要清除HTML，我认为它在逻辑和语法方面存在一些问题。这是您可以做的简单示例：

jsFiddle

<强> HTML

<div id="content">
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
</div>

<强> CSS

#content{
    width:80vw;
    text-align:center;
}
a{
    display:inline-block;
}

Answer 2

我认为您当前页面的居中没有任何问题。我建议使用Bootstrap构建您的网站。它会为您提供相同的响应功能，而不需要您编写所有CSS标记。

以下是您在Bootstrap 3上运行的示例HTML代码的example，其中没有您编写的所有CSS：

<div id="content" class = "row">
      <div class = "col-md-2 col-sm-4">
        <a href="https://github.com/kfrncs"><img src="http://kennethfrancis.com/img/github.png" class="social" id="github"></a>
          </div>
          <div class = "col-md-2 col-sm-4">
            <a href="https://twitter.com/kfrncs"><img src="http://kennethfrancis.com/img/twitter.png" class="social" id="twitter"></a>
      </div>
      <div class = "col-md-2 col-sm-4">
        <a href="mailto:kennethpatrickfrancis@gmail.com"><img src="http://kennethfrancis.com/img/gmail.png" class="social" id="gmail"></a>
          </div>
      <div class = "col-md-2 col-sm-4">
        <a href="skype:kennethpatrickfrancis?add"><img src="http://kennethfrancis.com/img/skype.png" class="social middle" id="skype"></a>
      </div>
      <div class = "col-md-2 col-sm-4">
        <a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="http://kennethfrancis.com/img/stackoverflow.png" class="social" id="stackoverflow"></a>
      </div>

在示例中，移动右下方屏幕的左边框以根据文档宽度查看图标堆栈和取消堆叠

Answer 3

哥们，首先你的HTML是非常糟糕的，你不能放在一个必须在里面第二，你有一个开放的div，一个有阻塞类的人，不知道你是不是错误地复制了它，但无论如何要检查它。

第三，如果你只想要5行中心内容，只需使用5个div，每个div需要100％的文本对齐中心css属性，就是这样

如何使这些元素有效地适应中心并做出响应？

3 个答案: