图像上的文本横幅未正确对齐答案

【问题标题】：Text banner over image not aligned properly图像上的文本横幅未正确对齐
【发布时间】：2022-01-27 01:10:34
【问题描述】：

我对 CSS 比较陌生，我一直在尝试让横幅越过图像。我不确定如何使文本位于中间而不是与顶部对齐，而且如果您注意到，横幅并没有完全到右侧的末尾，留下一个小间隙。

.article-box4 {
    background-image: url("Thumbnails/Anatomy_of_a_Sunset-2.jpg");
        background-repeat: none;
    background-position: center;
    background-size: cover;
    height: 200px;
    width: 300px;
}

.award-ribbon {
    height: 35px;
    width: 180px;
    background-color: #49c2d7;
    position: absolute;
    top: 48px;
    right: -6px;
    text-align: center;
    color: #FFF;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
  -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}

.award-ribbon:before {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 37px;
    border-left-width: 53px;
    border-right-width: 26px;
    content: "";
    display: block;
    left: -49px;
    position: absolute;
    width: 141%;
    border-top-width: 0px;
    border-bottom-color: #49c2d7;
    top: -2px;
    z-index: -1;
}

<a href="https://www.google.com/">
  <div class= "article-box-wrap">
      <div class = "award-ribbon"> Award Winner</div>
      <div class = "article-box4"></div> 
      <div class = "article-title-container">
          <img class= "newspaper-logo" src="logos/paper.jpg"/>
      <p class = "article-title">Insert title of article here</p> </div>
  </div>
</a>

如果您能在此处指出正确的方向，非常感谢。

【问题讨论】：

标签： css flexbox

【解决方案1】：

Flexbox 将在这种情况下工作，请参阅 sn-p。

.article-box4 {
    background-image: url("Thumbnails/Anatomy_of_a_Sunset-2.jpg");
        background-repeat: none;
    background-position: center;
    background-size: cover;
    height: 200px;
    width: 300px;
}

.award-ribbon {
    height: 35px;
    display: flex;
    width: 180px;
    justify-content: center;
    align-items: center;
    background-color: #49c2d7;
    position: absolute;
    top: 48px;
    right: -6px;
    text-align: center;
    color: #FFF;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
  -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}

.award-ribbon:before {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 37px;
    border-left-width: 53px;
    border-right-width: 26px;
    content: "";
    display: block;
    left: -49px;
    position: absolute;
    width: 141%;
    border-top-width: 0px;
    border-bottom-color: #49c2d7;
    top: -2px;
    z-index: -1;
}

<a href="https://www.google.com/">
  <div class= "article-box-wrap">
      <div class = "award-ribbon"> Award Winner</div>
      <div class = "article-box4"></div> 
      <div class = "article-title-container">
          <img class= "newspaper-logo" src="logos/paper.jpg"/>
      <p class = "article-title">Insert title of article here</p> </div>
  </div>
</a>

【讨论】：