我有this layout , 基于 twitter bootstrap.
它看起来以 narrow screens 为中心
但是totally not centered on more wider screens
在 html 中它基本上是这样的:
<body>
<div class="container-fluid">
<!-- This row is perfectly centered -->
<div class="row header center-block">
<div class="logo col-md-12 col-lg-12 center-block text-center">
<img src="logo.jpg">
</div>
</div>
<!-- This row needs to be centered -->
<div class="row content center-block text-center">
<!-- first column with five images. It should be 3 images in a row in narrow screens and 4 in wider screens -->
<div class="col-md-5 col-lg-5 scene itemlist center-block text-center">
<div class="row scene-header">
<img src="scene.jpg">
</div>
<div class="row scene-elements">
<div class="scene-element">
<img class="clickimg" src="http://i.imgur.com/ouImJ3j.jpg">
</div>
<div class="scene-element">
<img class="clickimg" src="http://i.imgur.com/6H9PBdO.jpg">
</div>
<div class="scene-element">
<img class="clickimg" src="http://i.imgur.com/S731TrW.jpg">
</div>
<div class="scene-element">
<img class="clickimg" src="http://i.imgur.com/tEj2TzR.jpg">
</div>
<div class="scene-element">
<img class="clickimg" src="http://i.imgur.com/j0fUzW3.jpg">
</div>
</div>
</div>
<!-- Middle row with text. This row needs to have bigger left and right margins on wider screen -->
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info center-block text-center">
<div class="infoblock">
<div class="row info-header">
MEFJUS
</div>
<div class="row info-elements">
<p class="link"><a target="_blank" href="https://soundcloud.com/mefjus">SOUNDCLOUD</a></p>
<p class="link"><a target="_blank" href="https://www.facebook.com/mefjus">FACEBOOK</a></p>
<p class="link"><a target="_blank" href="http://vk.com/the_upbeats">VK</a></p>
</div>
</div>
</div>
<!-- seconf column with five images. It should be 3 images in a row in narrow screens and 4 in wider screens -->
<div class="col-md-5 col-lg-5 our itemlist center-block text-center">
<div class="row our-header">
<img src="our.jpg">
</div>
<div class="row our-elements">
<div class="our-element">
<img class="clickimg" src="http://i.imgur.com/IxrgHax.jpg">
</div>
<div class="our-element">
<img class="clickimg" src="http://i.imgur.com/X3roxXK.jpg">
</div>
<div class="our-element">
<img class="clickimg" src="http://i.imgur.com/LH8N8uH.jpg">
</div>
<div class="our-element">
<img class="clickimg" src="http://i.imgur.com/zb3dARv.jpg">
</div>
<div class="our-element">
<img class="clickimg" src="http://i.imgur.com/rDDkie8.jpg">
</div>
</div>
</div>
</div>
<footer class="footer text-center"></footer>
</div> <!-- /container --></body>
我需要 .content 行作为 .header 行居中，但是 .center-block 和 .text -center 在这里不起作用，因为它们在 Logo 上起作用。
我还需要第一列和第三列在窄屏幕上每行有 3 个成像器，在较宽的屏幕上每行有 4 个图像。同样，我想为中间的 .info 列添加一些左右边距。
我该怎么办？很抱歉问了这么多问题，我是新手。
最佳答案
将布局更改为低于 div 宽度
<div class="col-md-12 col-lg-12 row content center-block text-center">
<!-- ^^^^---added md and lg classes here -->
<div class="col-md-5 col-lg-5 scene itemlist center-block text-center"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 info center-block text-center"></div>
<div class="col-md-5 col-lg-5 our itemlist center-block text-center"></div>
</div>
问题:
您还没有为包含 3 个子 div 的容器 div 定义
md/lg您正在为左右子项设置不相等的
offset值 - 这会导致标记在不同的视口(viewport)中表现不同只是一个想法 - 你可以不同意 - 将
center-block放在子 div 中是一种浪费，只需将其放在父 div 中!
请注意 itemlist 具有固定宽度，这会扭曲对齐方式，将其删除，一切都会好起来的! :)
关于html - 如何在容器流体中以三列行居中行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27225508/