如何將div中的元素集中

我正在使用bootstrap 2.3.2。我有一個裏面有一些井的div。這裏是一個Preview 如何將div中的元素集中

我的結構

<body> 
    <div class="page-header"> 
     <h1 id="title">Title</h1> 
    </div> 

    <div class="row"> 
     <div class="span3 my_span"> 
      <div class="well my_well"> 
       <h1>Text</h1> 
       <hr> 
       <p>More Text</p> 
       <hr> 
       <button class="btn btn-primary">Button</button> 
      </div> 
     </div> 

     <div class="span3 my_span"> 
      <div class="well my_well"> 
       <h1>Textr</h1> 
       <hr> 
       <p>More Text</p> 
       <hr> 
       <button class="btn btn-primary">Button</button> 
      </div> 
     </div> 

     <div class="span3 my_span"> 
      <div class="well my_well"> 
       <h1>Textr</h1> 
       <hr> 
       <p>More Text</p> 
       <hr> 
       <button class="btn btn-primary">Button</button> 
      </div> 
     </div> 
    </div> 
</body>

該井是一排DIV內，如何水平居中所有的井？

這裏是jsfiddle的代碼。

來源

2014-01-28 capzulu

我想這是你描述：Fullscreen View

See jsfiddle

我修改my_span：

.my_span { 
    width: 300px; 
    margin: 0 33px; 
    float: none; 
    display:inline-block; 
}

並補充說：

.row { 
    text-align: center; 
    margin: 0; 
}

編輯：我編輯小提琴有點修復邊距。

來源

2014-01-28 16:46:17

謝謝，這工作 – capzulu

只需使用margin: 0 auto即可將您的div設置爲居中。

.my_span { 
    width: 300px; 
    margin: 0 auto; 
}

http://jsfiddle.net/BVmUL/367/

來源

2014-01-28 16:22:53 Hacknightly

我建議'@media（最大寬度：767px）{{.my_span保證金：0汽車;}}' –

，這並不中心的div呢？ – Cam

@Cam我不確定你的意思，小提琴似乎工作... – Hacknightly

你可以做

.parent-of-centered-div { 
    text-align: center; 
} 
.centered-div { 
    display:inline-block; 
    width: 20px; /* needs fixed width */ 
}

來源

2014-01-28 17:03:05

如何將div中的元素集中

回答

相關問題