在所有屏幕尺寸上的图像居中引导

avasssso 发表于 Dev

阿瓦索

我正在使用引导程序将社交图标块在所有屏幕尺寸的h1文本下方居中放置。我几乎明白了，它只有2个尺寸在不断变化。

这是我的代码：

<div id="container">

        <div class="social-and-coming">
    <div class="coming-soon text-center ">
        <h1 class="coming ">Coming Soon</h1>
    </div>
    <div class="row">
    <ul class="col-md-offset-3 col-md-11 col-sm-offset-3 col-sm-11 col-xs-offset-1 col-xs-11">

        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></a></li> 
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></a></li>
        <li class="col-xs-1 col-sm-1 col-md-1"><a href=""><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></a></li>
    </ul>
    </div>
    </div>
</div>

这是我的CSS：

#container{
      // min-height:100%;
   position:relative;
}

.site-title a{
    font-family: Heiti TC;
    color: #E8970C;
}

.text-center{
    color: #E8970C;
}

.coming-soon h1{
    font-family: Heiti TC;
    font-size: 75px;
}

.row{
    // width:700px;
margin: 0px auto;
}

.col-xs-1{
    margin-left: 15px;
}



li{
    margin-right: 20px;
    margin-top: 20px;
}

img{
    width:40px;
}

任何帮助将不胜感激！

芬罗德

只需删除列表并text-center像使用标题一样使用它，它应该可以工作：

<div id="container">
    <div class="social-and-coming">
        <div class="coming-soon text-center">
            <h1 class="coming">Coming Soon</h1>
        </div>
        <div class="text-center">
            <a href=""><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></a>
            <a href=""><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></a>
        </div>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。