设置一个负边距，它是其高度的百分比。纯 CSS

Question

我有一系列图片，它们有不同的标题。这些标题中的每一个都需要出现在图像底部的中间位置。这是它的外观模型以及我在 divs 中构建它的方式。因为标题底部和下面的任何 div 之间需要有 space，所以标题不能绝对定位。

我知道这可以在 javascript 中完成，但这将是一个 hack，所以我更愿意找到一个仅 CSS 的解决方案。

...这里是目前的代码：JS FIDDLE

.outer {
  position: relative;
  width: 320px;
  margin-bottom:24px // this needs to be the space between the bottom of the caption and the next image or whatever div is beneath.
}

.image {
  background-color: blue;
  width: 320px;
  height: 380px;
  position: relative;
  border-radius: 5px;
}

.caption {
  position: relative;
  margin-top: -24px;
  /* THIS NEEDS TO BE 50% of the Captions variable height */
}

.card {
  margin-right: 25%;
  margin-left: 5%;
  position: relative;
  background-color: #FFFFFF;
  padding: 24px;
  line-height: 24px;
}

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="card">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet. a
    </div>
  </div>
</div>

Answer 1

尝试将边距顶部更改为 -25%。

.caption {
display:block;
position:relative;
margin-top:-25%; 
}

Answer 2

因此，您希望始终将此标题贴在图片底部，同时根据标题高度位于 parent 容器下方 50% 的位置？

.outer {
  display:block;
  position:relative;
  width:320px;
}

.image {
  background-color:blue;
  width:320px;
  height:380px;
  display:block;
  position:relative;
  border-radius:5px;
}

/* Swapped the caption div to absolute, so it's always adhered to the bottom of the 'outer' container */

.caption {
  display:block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

/* Setup the 'block' div to do the actual '50%' manuevering based on the height of the  'caption' container with 'transform: translate(50%)' */

.block {
  transform: translateY(50%);
  background-color:#FFFFFF;
  padding:24px;
  line-height:24px;
}

我在这里设置了一个 jsfiddle 来演示更改@https://jsfiddle.net/evanbriggs/v7rxqtcz/。让我知道这是否是您的想法。

Answer 3

只需使用 position: absolute 和 transform 属性即可。

这是一个例子： https://jsfiddle.net/nawLywc9/1/

.block 类必须是这样的：

.block {
    position:relative; // This is important
    background-color:#FFFFFF;
    padding:24px;
    line-height:24px;
    bottom: -50%; // This is important
    transform: translateY(-50px); // This is important
    width: 60%;
    border-radius: 5px;
    margin: 0 auto; // Only if you need to be centered
}

这是预览：https://jsfiddle.net/nawLywc9/1/

Answer 4

不幸的是，事实证明这完全不可能 CSS... 尽管很多人认为没有负填充的有效用例，但我认为这是。

所以...我最后做的是使用 ::after 块元素，它覆盖了字幕背景的下半部分。但是，因为这意味着我不能有圆角或显示整个图像，所以我还添加了 javascript 覆盖。这会查询字幕高度的一半，并将其作为填充底部值应用到容器。请参阅下面的 fiddle 和代码：

https://jsfiddle.net/todd_143/nawLywc9/5/

<div class="outer">
  <div class="image">
  </div>
  <div class="caption">
    <div class="block">
      Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
    a</div>
  </div>
</div>

body {
  background-color:#FFFFFF;
}
.outer {
    display:block;
    position:relative;
    width:320px;
}

.image {
    background-color:blue;
    width:320px;
    height:350px;
    display:block;
    position:relative;
    border-radius:5px;
}

.caption {
    position:absolute;
    bottom:0; right:0; left:0;

}

.caption::before {
    background-color: #FFFFFF;
    content:"";
    position:absolute;
    top:50%; left:0; right:0; bottom:-1px;
    background-color#FFFFFF;
    display:block;
}

.block {
  position:relative;
  background-color:#FFFFFF;
  padding:24px;
  left:5%;
   line-height:24px;
  width: 60%;
  border-radius: 5px;
  margin: 0 auto;
  display:inline-flex;
  box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.05);
}

$(document).ready(function() {
    promoCaption();
});

$(window).resize(function() {
    promoCaption();
});

function promoCaption() {
    //allow caption to sit half way on bottom edge of promos while keeping their ratio. Purely cosmetic
    $(".outer").each(function() {
        // get caption height
        var captionHeight = ($(this).find(".caption").height());
        // get caption offset by halfing its height
        var captionOffset = captionHeight / 2;
        // apply caption offset as padding bottom to the promo container
        $(this).css("padding-bottom", captionOffset);
    });
}

虽然令人沮丧，因为我不喜欢对任何结构使用 javascript。但是为了让它起作用，我找不到任何其他方法。

Answer 5

我通过以下方式实现了这一目标：

/* Required to expand element to height required. */
position: relative;
/* Move up by 50% of own Height. */
transform: translateY(-50%);

设置一个负边距，它是其高度的百分比。纯 CSS

Setting a negative margin which is a percentage of its height. Pure CSS

css

margin

caption