Question

我试图使用margin / padding（前80％/下限20％）将文本定位在div底部以上20％左右。然而，看起来它不能以这种方式工作，边距/填充只是从盒子里出来而不是根据需要定位文本。

我可以使用margin：20％将它定位在图像的中心但是我想将它定位在底线以上20％，因为当我改变分辨率时文本继续移动，有时它会因溢出而完全隐藏

有关如何略微高于div底部的任何建议吗？最好不要使用position：absolute，因为这个设置对我来说搞砸了其他一切。

＆＃13;

.featured_title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: auto;
    margin-top: 80%; /* this needs to be removed in order for text to become visible as currently it's hidden due to overflow:hidden */ 
    margin-bottom: 20%;
    font-size: 4vw;
    color: #000;
    width: 65%;
    text-align: center;
}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
    max-height: 500px;
    overflow: hidden;
}

.banner {
    max-height: inherit;
}

.banner {
    margin:auto;
    width: 80%;
    display: block;
    max-height: 500px;
    overflow: hidden;
}

.featured_image {
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%
}

＆＃13;

<div class=browser>
    <div class="featured_box">
        <div class="banner" onclick="location.href=">
            <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
                <p class="featured_title">Text goes here</p>
            </div>
        </div>
    </div>
    <div class=browser>

＆＃13;

Answer 1

这是你想要的吗？

我将以下CSS添加到.featured-image：

display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 20%;

* {
  box-sizing: border-box;
}

.featured_title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  font-size: 4vw;
  color: #000;
  text-align: center;
  color:white;
  
}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
  max-height: 500px;
  overflow: hidden;
}

.banner {
  max-height: inherit;
}

.banner {
  margin: auto;
  width: 80%;
  display: block;
  max-height: 500px;
  overflow: hidden;
}

.featured_image {
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20%;
}

<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

Answer 2

我添加了＃34; top＆＃34;和＆＃34;位置＆＃34;元素到您的代码和删除的边距这是你想要的？我的意思是文字正好在你的图像的div上面

＆＃13;

 

   * ..featured_title {
-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;   <!---added position -->
    top: 450px;           <!-- added top --> 
    font-size: 4vw;
    color: #000;
    width: 65%;
    text-align: center;

}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
    max-height: 500px;
overflow: hidden;
}

.banner {
max-height: inherit;
}

.banner {
margin:auto;
  width: 80%;
  display: block;
max-height: 500px;
overflow: hidden;
}

.featured_image {
overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
height: 500px;
width: 100%
}

＆＃13;

<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

＆＃13;

Answer 3

在这种情况下，指定px而不是百分比将解决问题。

您也可以在codepen上查看 - https://codepen.io/Ilima/pen/gzVWJB?editors=1100

＆＃13;

.featured_box {
  max-height: 500px;
  overflow: hidden;
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.featured_image {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
}
.featured_image:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

.featured_title{
  margin-top: 360px;
  position: relative;
  z-index: 1;
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

＆＃13;

<div class="featured_box">
  
  <div class="featured_image">
      <p class="featured_title"> Text goes here </p>
  </div>
</div>

<div class="browser"></div>

＆＃13;

Answer 4

这是给你的代码：

<body>

      <div class="container-fluid img-responsive">
        <div class="row">
          <div class="col-4 col-sm-4 " ></div>
          <div class=" col-4 col-sm-4" ><img src="4.jpg"> </div>
       </div>
       <div class="row">
        <div class=" col-4 col-sm-4 " ></div>
        <div class=" col-4 col-sm-4" >text goes here</div>
       </div>
      </div>

</body>

您可以调整窗口大小以查看响应能力：https://jsfiddle.net/3myfa6fe/

请注意我正在使用bootstrap。请从CDN bootstrap页面为它添加所需的库。这是一个非常小的代码可以理解，而不是占用那些大的html css代码件。所有这些都是最好的。

保证金/填充超出了div

4 个答案: