2015-10-20 135 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; 
}