Question

我遇到了使用浮动div来居中容器的问题。这是我的HTML：

<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代码用于它因为它的500行更少（并且我不想放置它的选定片段），我只说每个块最终看起来像那样

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

我在项目中使用bootstrap。我需要使用浮动元素才能完美地适合彼此。

现在看起来如何：

我想我不需要解释我想要的效果。

Answer 1

检查此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;
}

中心漂浮了div

1 个答案: