Question

以下是我正在使用的页面供参考：https://sanafoodsystem.com/ShopNow/Food/Breakfast/FlaxPancakes/tabid/131/Default.aspx

你可以看到一切都是左对齐的，当我居中最主要的最里面的div时，每个都在6 span栏中居中并且将列拉得更远，在中间创建了一个大空间。我怎样才能使整个div居中，而不是在中间创建大空间？中心块似乎不起作用。

这是我的代码：

<div class="container center-block">
<div class="row">
    <div class="col-sm-6">
        <img alt="" src="/portals/0/Images/products/current/BK009-Flax%20Pancakes.jpg" class="dnn-scale-img" />
        <br />
        <p>Made with organic whole wheat with a healthy dose of flaxseed.  They taste almost no different than regular pancakes.  Very simple to make by just placing them in a toaster for approximately 2 minutes.  The blueberries are an excellent source of anti-oxidants. </p>
    </div>
    <div class="col-sm-6">
        <img alt="" src="/LinkClick.aspx?fileticket=VLjbnyMKb3Q%253d&amp;portalid=0" class="dnn-scale-img" />
    </div>
</div>

更新代码以展示我想要的效果，但是左边的煎饼图片现在太小了，并且通过在较小的列中调整大小。

    <div class="row">
    <div class="col-sm-2">
        &nbsp;
    </div>

    <div class="col-sm-4">
        <img alt="" class="dnn-scale-img" src=
        "/portals/0/Images/products/current/BK009-Flax%20Pancakes.jpg"><br>

        <p>Made with organic whole wheat with a healthy dose of flaxseed.
        They taste almost no different than regular pancakes. Very simple
        to make by just placing them in a toaster for approximately 2
        minutes. The blueberries are an excellent source of
        anti-oxidants.</p>
    </div>

    <div class="col-sm-4"><img alt="" class="dnn-scale-img" src=
    "/LinkClick.aspx?fileticket=VLjbnyMKb3Q%253d&amp;portalid=0"></div>

    <div class="col-sm-2">
        &nbsp;
    </div>
</div>

Answer 1

你的营养表很窄。这就是在中间创造“空间”的原因。我建议将其转换为col-sm-3，并在食物图像的左侧添加另一个。这将使图像居中，但将其保持在营养表旁边。

<div class="container center-block">
<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
        <img alt="" src="/portals/0/Images/products/current/BK009-Flax%20Pancakes.jpg" class="dnn-scale-img" />
        <br />
        <p>Made with organic whole wheat with a healthy dose of flaxseed.  They taste almost no different than regular pancakes.  Very simple to make by just placing them in a toaster for approximately 2 minutes.  The blueberries are an excellent source of anti-oxidants. </p>
    </div>
    <div class="col-sm-3">
        <img alt="" src="/LinkClick.aspx?fileticket=VLjbnyMKb3Q%253d&amp;portalid=0" class="dnn-scale-img" />
    </div>
</div>

您还需要添加以下CSS。

.col-sm-3 {
    min-height: 1px;
}

.col-sm-3 img {
    width: 100%;
    height: auto;
}

Answer 2

您无法使容器居中，但您可以给它一个更大的左右边距以显示中心。

或

我建议使用bootstraps偏移功能来偏移列而不是居中。

.col-md-6 .col-md-offset-3

http://getbootstrap.com/css/#grid-offsetting

使用Bootstrap，我可以在没有＆＃39; center-block＆＃39;的情况下居中DIV吗？

2 个答案: