2015-10-20 171 views
-1

我有一個與浮動div中心容器的問題。 這裏是我的html:中心浮動div

<section class="bright front slider"> 
    <div class="container"> 
     <div class="title hidden-xs"> 
      Profesjonalna<br/>paltforma<br/>ankietowa 
     </div> 
     <div class="home-blocks"> 
      <div class="blocks size-sm"> 
       <a href="" class="block vertical orange offset-2 bordered hovered"> 
        <div class="content left"><div class="border"><div class="text no-margin"><h3 class="white">Badania</h3></div></div></div> 
        <div class="content right" style="background: url(images/bg-orange.png) repeat, url(images/tile-img2.png) no-repeat left top;"><div class="border"></div></div> 
        <div class="hover orange"><div class="ht">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tincidunt velit. Nunc viverra bibendum nibh et efficitur.</div></div> 
       </a> 
       <div class="clear"></div> 
       <a href="" class="block vertical green offset-1 bordered hovered"> 
        <div class="content left"><div class="border"><div class="text no-margin"><h3 class="white">Wdrożenia</h3></div></div></div> 
        <div class="content right" style="background: url(images/bg-green.png) repeat, url(images/tile-img1.png) no-repeat left top;"><div class="border"></div></div> 
        <div class="hover green"><div class="ht">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tincidunt velit. Nunc viverra bibendum nibh et efficitur.</div></div> 
       </a> 
       <div class="clear"></div> 
       <a href="" class="block vertical blue bordered hovered"> 
        <div class="content left"><div class="border"><div class="text no-margin"><h3 class="white">Wsparcie</h3></div></div></div> 
        <div class="content right" style="background: url(images/bg-blue.png) repeat, url(images/tile-img4.png) no-repeat left top;"><div class="border"></div></div> 
        <div class="hover blue"><div class="ht">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tincidunt velit. Nunc viverra bibendum nibh et efficitur.</div></div> 
       </a> 
       <a href="" class="block vertical red bordered hovered"> 
        <div class="content left"><div class="border"><div class="text no-margin"><h3 class="white">Szkolenia</h3></div></div></div> 
        <div class="content right" style="background: url(images/bg-red.png) repeat, url(images/tile-img3.png) no-repeat left top;"><div class="border"></div></div> 
        <div class="hover red"><div class="ht">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tincidunt velit. Nunc viverra bibendum nibh et efficitur.</div></div> 
       </a> 
      </div> 
     </div> 
    </div> 
</section> 

我不會把CSS代碼它becouse其500線以下(我不想把它選擇的片段),我只說每個塊可看像那到底

.block{ 
    display: inline-block; 
    float: left; 
    overflow:hidden; 
    width: 360px; 
    height: 130px; 
} 

我在我的項目中使用引導程序。我需要使用浮動元素來完美匹配對方。

現在怎麼看: enter image description here

我想我不需要解釋我想要什麼樣的影響。

+0

如果您使用的引導,那麼你可以管理與這些行級和col-SM-12組合的流 – WisdmLabs

回答

0

入住此CSS

.home-blocks 
{ 
text-align:center; 
} 

.block{ 
    display: inline-block; 
    overflow:hidden; 
    width: 360px; 
    height: 130px; 
    text-align:center; 
} 

And for aligning images in center you must have to give this css for images in bootstrap 
img { 
    display: inline-block; 
}