javascript - 使用 css responsive 将 div 中的元素居中

Question

我有一个 div，它由另外 3 个 div 组成，如下所示。

当调整窗口大小时，或者说如果正在移动设备中查看页面，则段落 p 标签消失，只有 anchor 标签 a 仍然存在，并且将显示图标。我能够隐藏段落标签，但无法将标签图标水平对齐并位于页面中心。请给我建议，让我知道是否应该包含更多信息。谢谢。

这是与 div 关联的 HTML 和 CSS

<div class="container" id="footer">
  <div class="row">
    <div class="col-md-4 footerSections paddingBottom20">
      <div class="footerProfile">
        <img src="images/avatar.jpg" id="avatar" height="100" width="100" style="float:left;" />
        <p style="text-align: justify;">Deepak is a graduate in Computer Science. In my free time I like to learn new technologies and hangout with my friends.</p>
      </div>
    </div>
    <div class="col-md-4 footerSections">
      <div class="footerSocialLinks">
        <div> <a href="#" target="_blank" style="float:left"><i class="fa fa-twitter fa-fw fa-2x"></i></a>

          <p class="desktop-only">Follow <a href="#" target="_blank">@imadistack</a> for web development</p>
        </div>
        <div> <a href="#" target="_blank" style="float:left"><i class="fa fa-twitter fa-fw fa-2x"></i></a>

          <p class="desktop-only">Follow <a href="#" target="_blank">@imadistack</a> for web development</p>
        </div>
        <div> <a href="#" target="_blank" style="float:left"><i class="fa fa-twitter fa-fw fa-2x"></i></a>

          <p class="desktop-only">Follow <a href="#" target="_blank">@imadistack</a> for web development</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 footerSections">
      <div class="footerMenu">
        <dl> <dt><a href="#aboutMe">ABOUT</a></dt>

          <dd class="desktop-only">Learn about Deepak’s skills and workflow</dd> <dt><a href="#portfolio">PORTFOLIO</a></dt>

          <dd class="desktop-only">View Deepak’s design &amp; front-end development work</dd> <dt><a href="#skills">SKILLS</a></dt>

          <dd class="desktop-only">Learn about Deepak's skills</dd> <dt><a href="#education">EDUCATION</a></dt>

          <dd class="desktop-only">Learn about Deepak's education</dd> <dt><a href="#contact">CONTACT</a></dt>

          <dd class="desktop-only">Send a message or project request to Deepak</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

.footerSections{
     padding:0 30px 0 30px;
    }

    .footerSocialLinks ul{
        list-style:none; margin:0; padding:0;
    }

    @media (min-width: 640px) 
    {
        .desktop-only{
            display:block;
        }

    }

    @media (max-width: 640px) 
    {
        .desktop-only{
            display:none;
        }

        #footer{
            padding: 40px 35px 40px 35px;
        }

        .footerSections{
            padding:10px;
        }

        .footerMenu dt {
            text-align:center;
            padding: 5px 0 5px 0;
        }
        .footerSocailLinks {
            display: inline-block;
            text-align: center;
        }

    }

更新:我确实使用了媒体查询，这就是我能够隐藏 p 标签的方式。

这是 fiddle 的链接

http://jsfiddle.net/JfGVE/598/

您会看到 Twitter 图标位于页面左侧。当窗口尺寸缩小或在移动 View 中时，它们应该居中。

Answer 1

这里有 3 个问题。

1. anchor 标记的 float:left。它使您的元素忽略父容器中的所有 text-align。
2. .footerSocialLinks 的 display: inline-block，您应该将其保留为标准 display: block 或添加一个 width(例如 width: 100%)到元素。
3. 您需要在 .footerSocialLinks 上设置 whitespace: no-wrap 并在其内部的分区上设置 display:inline-block以防止他们跳入新行。

此外，您当前的样式表“.footerSocailLinks”中存在拼写错误。

试试下面的样式表:

.footerSocialLinks{

    text-align:center;

    whitespace:no-wrap;

 } 

.footerSocialLinks > div{

    display:inline-block;

    text-align: center;

}

我在你的 fiddle 中试过这个，它做了它应该做的。只需将上面的样式表放在媒体查询中即可。

并且不要忘记从您的 anchor 标记中删除 float!