使用CSS响应将div中的元素居中

Question

我有一个div，其中包括3个以下的div。

调整窗口大小或说如果在移动设备中查看页面时，我在这里试图做的事情就是段落p标签消失，只有锚标签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标签的方式。

这是小提琴的链接

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

您会看到Twitter图标在页面的左侧。 当缩小窗口大小或在移动视图中时，它们应居中。

Answer 1

您可以使用媒体查询根据客户端大小来切换CSS块，例如：

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

Answer 2

如果要使锚标记居中，则无法简单地在锚上使用文本对齐中心，因为默认情况下它是嵌入式元素。 有两种方法可以将锚定标签居中：

首先-将文字对齐中心应用于父元素

<div style="text-align: center">
    <a href="#">Anchor Tag</a>
</div>

第二个-将锚点更改为显示：块，然后应用文本对齐：居中

<div>
    <a href="#" style="display: block; text-align: center">Anchor Tag</a>
</div>

看看： https ： //jsfiddle.net/kwf8dsoa/

这些选项之一，再加上媒体查询，应该可以为您完成工作

Answer 3

您在这里遇到3个问题。

1. float:left锚标记的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;

}

我在您的小提琴中尝试了此操作，并且它应该执行的操作。 只需将样式表放在媒体查询中即可。

而且不要忘了从锚标签中删除float ！