div对齐和不透明度的问题答案

【问题标题】：Problems with div alignment and opacitydiv对齐和不透明度的问题
【发布时间】：2017-08-13 09:55:01
【问题描述】：

我正在尝试制作一个带有链接的框，该框具有低不透明度的背景和具有不同项目的两个 div。我已经尝试了所有方法，但我似乎无法让它们正确对齐。这是我想要实现的目标，以及我的代码。 This is an image of what I want to do.
这是代码。 https://jsfiddle.net/hmelluso/b3f2m2tb/

【问题讨论】：

编辑问题的标题，以获得对问题本身更具描述性的内容。它变得更容易让其他用户帮助你。
完成！我认为现在问题的重点变得更加清晰了。

标签： html css alignment positioning

【解决方案1】：

主要是这个标签<div class="redfooterh> 缺少类名后的引号：<div class="redfooterh">

还有其他一些需要微调的设置，请看这里：

https://jsfiddle.net/4son84j9/2/

【讨论】：

【解决方案2】：

https://jsfiddle.net/b3f2m2tb/3/

您可以只添加一个相对背景 div 来制作不透明背景。

.redfooterw {
    max-width: 70rem;
    height: 7rem;
    position: relative;
    border: solid 1px;
    display: flex;
    align-items: center; /* align vertical */
    justify-content: center;
    border-color: #eb1c2d;
}
.background{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fcc;
  opacity: 0.2
}
.inficon{
   width: 20%;
   z-index: 5;
   text-align: center;
   font-size: 30px;
    padding-bottom: 1%;
}
.footerlink{
  text-align: left;
  width:80%;
   font-size: 20px;
    padding-bottom: 1%;
}

<div class="redfooterw">
  <div class="background">
  </div>
      <div class="inficon"> &#128712;
      </div>
      <div class="footerlink ">
        <a href="# " target="_blank ">Para mayor información sobre este producto clic aquí.</a>
      </div>
</div>

【讨论】：

太好了，感谢您的快速回答，您能说出我在对齐两个元素方面做错了什么吗？