Question

我正在尝试执行一些简单的容器代码以使图像居中，但找不到为什么我的容器的高度为0。

test['minimum'] = grouping.transform(min) # ceates an extra column filled with minimum payment
test.price - test.minimum # returns the difference for each row

为什么容器的高度为0，因此我的图像没有显示？

Answer 1

默认情况下，块元素从其内容获得高度。内容表示在HTML中元素的开始和结束标记之间的内容。背景图像不会令人满意，但可以认为更像是装饰。

您可以使用css手动将高度设置为所需的任何高度。请记住，尽管空元素是非语义代码。

Answer 2

添加height属性可以解决您在注释中提到的问题。

另一个解决图片大小变化问题的方法是在img元素内使用#test标签。

<div id="test" style="background-image: url(/my-image.jpg);">
 <img src="/my-image.jpg" style="visibility: hidden;" />
</div>

通过这种方式，div根据图像大小占据高度。

Answer 3

<div class="text-center d-flex" style="height: 100vh">
    <div class="container m-auto">
        <div class="row">
            <div class="col-8 mx-auto">
                <h1> YOU CAN DO IT </h1>
            </div>
            <div class="col-8 mx-auto">
                <h1> I should be centered </h1>
            </div>
        </div>
    </div>
</div>

Using margin:auto to vertically-align a div

作为链接的stackoverflow问题的第二个答案，这是因为我的父母不是flex类型。

自举容器的高度始终为0

3 个答案: