2016-08-19 49 views
2

那么,把这段内容分成两部分,即col-md-6,只是它们没有集中在网站上,尽管处于中间位置,它们放在左边,离开右侧有点空虚。遵循div的代码。Centering divs - Bootstrap

<div class="content"> 

    <div class="container clearfix"> 
         <div class="col-md-6 configdiv"> 
          <img src="/layout/images/imagem1.png" /> 
          <h5>TITULO 1</h5> 
          <p> 
          Oi, tudo bem? Oi, tudo bem? Oi, tudo bem? 
          Oi, tudo bem? 
          Oi, tudo bem? 
          <p> 
          <div> 
           <img src="/layout/images/iconemail.png" /> 
           <img src="/layout/images/iconefb.png" /> 
           <img src="/layout/images/iconett.png" /> 
          </div> 
         </div> 
         <div class="col-md-6 configdiv"> 
          <img src="/layout/images/imagem2.png" /> 
          <h5>TITULO 2</h5> 
          <p> 
           Oi, tudo bem? 
          <p> 
          <div> 
          <img src="/layout/images/iconemail.png" /> 
          <img src="/layout/images/iconefb.png" /> 
          <img src="/layout/images/iconett.png" /> 
          </div> 
         </div> 
    </div> 

</div> 

而CSS是这样的:

.configdiv {border: 1px solid #DDDDDD; 
      margin-right: 28px; 
      margin-bottom: 25px; 
      padding: 10px; 

记住这两个div AL-MD-6,是由侧方,我想被集中在屏幕上!内容内容:

Content----------------------------------------------------*/ 
    #content { 
position: relative; 
overflow: hidden; 
background-color: #FFF; 
} 

#content p { line-height: 1.8; } 

.content-wrap { 
position: relative; 
padding: 80px 0; 
} 

#content .container { position: relative; } 

回答

2

你需要用.row类来包装在<div>你列,.col-md-6。 Bootstrap的工作方式需要将所有列包装在一行中。

<div class="row"> 
 
    <div class="col-md-6"></div> 
 
    <div class="col-md-6"></div> 
 
</div>