中心网格图像响应

时间:2013-09-24 03:37:14

标签: css twitter-bootstrap html responsive-design center

我有一个很大的问题就是把我的div放在这里:http://www.divisionforty.com/wall/artists/我不能为我的生活让盒子在屏幕中居中。我试过保证金:0自动;但由于某种原因,我无法让它发挥作用。

任何帮助将不胜感激,

HTML

<div class="row">
    <div class="work">
        <div class="span12">
            <figure >
                <a href="http://www.divisionforty.com/wall/artists/cali-balles/">
                    <img width="200" height="200" src="http://www.divisionforty.com/wall/wp-content/uploads/2012/12/Cali-Balles-05b-250x250.jpg" class="attachment-artists wp-post-image" alt="Cali Balles, Branch Series [detail] Blown Glass 2010" />
                    <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;
}

2 个答案:

答案 0 :(得分:3)

margin:0 auto; div上需要span12样式,但是因为bootstrap将float:left设置为它们 span *类,你需要将它重置为不浮动

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

float:initial将浮动重置为其默认值

这会将div置于work div

答案 1 :(得分:0)

你试过这个吗?

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

编辑:没关系,其他答案更好。这会打破响应。