响应式图像的中心网格

Posted 2023-03-29

【中文标题】响应式图像的中心网格

【英文标题】：Center Grid Of Images Responsive

【发布时间】：2013-09-29 03:14:54

【问题描述】：

我在这里将我的 div 居中遇到了一个大问题：http://www.divisionforty.com/wall/artists/ 我一辈子都无法让这些框在屏幕上居中。我试过 margin: 0 auto;但由于某种原因，我无法让它工作。

任何帮助将不胜感激，

html

<div class="row">
    <div class="work">
        <div class="span12">
            <figure >
                <a href="http://www.divisionforty.com/wall/artists/cali-balles/">
                    <img   src="http://www.divisionforty.com/wall/wp-content/uploads/2012/12/Cali-Balles-05b-250x250.jpg" class="attachment-artists wp-post-image"  />
                    <dd>
                        Balles, Cali                            
                    </dd>
                </a> 
            </figure> 

CSS

/*Artists*/

.work 




.work figure 
  float: left;
    margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;

  margin-bottom: 20px;
  width:250px;
  height: 250px;
  line-height: 200px;
  -webkit-filter: sepia(0.4);
  position: relative;
  padding: 0 !important;


  transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;

【问题讨论】：

请在此处提供相关代码

我不知道你认为相关代码是什么

代表问题的代码，例如构成您的菜单的代码将不相关

【参考方案1】：

您需要在 span12 div 上使用 margin:0 auto; 样式，但由于引导程序将 float:left 设置为 span* 类，您需要将其重置为不浮动

.work .span12 
   float:initial;
   margin:0 auto;

float:initial 将浮点数重置为默认值

这将使 div 在work div 中居中

【讨论】：

它仍然有点偏离中心。有什么想法吗？

是的，span12 div 的右侧似乎有一些额外的空白，但目前看不到是什么产生了额外的空白。

那你有什么建议？

使用 display:inline-block 而不是 float:left 为您的 figure 元素似乎摆脱了右侧多余的空白

任何想法为什么它在缩小时不会居中？

【参考方案2】：

你试过了吗？

.row 
  width: 1200px;
  display: block;
  margin: 0 auto;

编辑：没关系，其他答案更好。这会破坏响应式。