Question

我试图将文字置于自动高度div内。与此示例类似，在说明Skate Gallery Here

的部分

这是我的HTML和CSS

＆＃13;

#home-checker-1 {
  width: 100%;
  height: auto;
  background-color: #9ccd64;
  position: relative;
}

#home-checker-1 img {
  width: 100%;
  height: auto;
}

#home-checker-1 .checker-box-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}
#home-checker-1 .checker-inner {
  display: table-cell;
  vertical-align: middle;
}
#home-checker-1 .checker-text-container {
  width: 360px;
  height: auto;
  color: #fff;
  margin: 0 auto;
}

＆＃13;

<section id="home-checker-1">
    <div class="row">
        <div class="col-md-6 no-padding">
            <img src="image.jpg">
        </div>
        <div class="col-md-6 no-padding">
            <div class="checker-box-wrapper">
                <div class="checker-inner">
                    <div class="checker-text-container">
                        <h3>Say Something Here</h3>
                        <p>Ius fugit tacimates persecuti ei, in wisi errem comprehensam has. Usu in error pericula delicatissimi,
                            eu cum homero numquam. Nostrud lobortis no mei, no sed vivendo fabellas. Nam te utinam causae, cu pro
                            tempor phaedrum dissentiunt, mei solet possim ei. Rebum evertitur definitiones.</p>
                        <a href="#" class="btn btn-primary">Find Job Opportunity</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

＆＃13;

我希望img水平占据<section>的50％（我使用引导网格实现此.col-md-6）。我希望它保持img宽高比。因此，屏幕越宽img越宽越高<section>。这将使右侧的部分更大。我可以使用margin:0 auto;使文本在右侧居中，但我不知道如何使文本保持垂直居中。我无法为.checker-text-container设置已定义的高度，因为其中的文字数量是动态的，这意味着高度是动态的，必须是自动的。

如何做到这一点？

Answer 1

试试这个。

#home-checker-1 .checker-text-container {
  width: 360px;
  height: auto;
  color: #fff;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

垂直和水平居中自动高度div内的自动高度div

1 个答案: