使用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 ！