在所有屏幕尺寸上对齐图像块bootstrap

问题描述：

我使用引导程序将所有屏幕尺寸下的h1文本下方的社交图标块居中。我几乎可以得到它，它只有两种尺寸，它不断变化。在所有屏幕尺寸上对齐图像块bootstrap

Here is how it looks where it is shifted to the left slightly

这里是我的代码：

<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>

是的，谢谢youuuu！ – avasssso

不客气'：）' – Finrod

答

这是很容易：

.yourclass { 
    width: SPECIFY_WIDTH; 
    margin: 0 auto; 
}

它将任何屏幕尺寸始终中心irresepctive。如果你想在小型设备上进行间隔，然后添加填充到class。

会.yourclass只是缠绕在一个div的ul元素？ – avasssso

你可以添加你想要的任何地方，但该元素应该是'block'或'inline-block'。我会推荐你'ul' –

答

您使用的是一些引导偏移，所以它永远不会在中间。我建议简化这一点，并摆脱UL类和id给它添加了一种应用下面的CSS：

#socialLinks { 
    list-style:none; 
    text-align: center; 
} 

#socialLinks li { 
    margin: 0; 
    display: inline-block; 
    float: none; 
}

jsFiddle demo

#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; 
 
} 
 

 
#socialLinks { 
 
    list-style:none; 
 
    text-align: center; 
 
} 
 

 
#socialLinks li { 
 
    margin: 0; 
 
    display: inline-block; 
 
    float: none; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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 id="socialLinks"> 
 

 
     <li class="col-xs-1 col-sm-1 col-md-1"> 
 
      <a href=""><img src="https://placehold.it/100x100" alt=""></a> 
 
     </li> 
 
     <li class="col-xs-1 col-sm-1 col-md-1"> 
 
      <a href=""><img src="https://placehold.it/100x100" alt=""></a> 
 
     </li> 
 
     <li class="col-xs-1 col-sm-1 col-md-1"> 
 
      <a href=""><img src="https://placehold.it/100x100" alt=""></a> 
 
     </li> 
 
     <li class="col-xs-1 col-sm-1 col-md-1"> 
 
      <a href=""><img src="https://placehold.it/100x100" alt=""></a> 
 
     </li> 
 
     <li class="col-xs-1 col-sm-1 col-md-1"> 
 
      <a href=""><img src="https://placehold.it/100x100" alt=""></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

答

你不能使用Bootstraps Div类助手吗？

类：文本中心（文本）类：中心块（图像）

他们似乎对我的工作，我不这样做补偿多少这样不是100％，他们会多么有效。

在所有屏幕尺寸上对齐图像块bootstrap

相关推荐