html - 创建居中的 GDPR 横幅

Question

我是 HTML 和 CSS 的新手，我正在尝试创建一个包含文本和两个按钮的简单横幅。横幅应该看起来像这样 enter image description here 这是我的代码:

  .banner{
  position: absolute;
  width:90%;
  display:inline-block;
  bottom:50px;
  height: 150px;
  background: rgba(215, 40, 40, 0.9);
	left:0px;
	right: 0px;
	margin: 0 auto;
	z-index: 100;
  display:inline-block;
  }
  
    
  .banner more_info_btn {
   float:right;
  }
  
  .banner ok_btn {
    float:right;
  }

<div class="banner">
<p> some text</p>
<div class="more_info_btn">more info</li>
<div class="ok_btn">ok</li>
</div>

我不确定如何水平和垂直对齐文本和按钮。你知道这个问题吗？

Answer 1

如果你想使用绝对位置，父级必须在相对位置的容器中

.banner{

  width:90%;
  align-items: center;
  text-align:center;
  height: 150px;
  background: rgba(215, 40, 40, 0.9);
	margin: 0 auto;
  display:flex;
  justify-content: center;
  }
  .wrap-text{width:100%;}

    
  .more_info_btn {
   display:inline;
   margin:5px;
  }
  
  .ok_btn {
    padding:5px;
    display:inline 
  }

<div class="banner">
 
<div class="wrap-text">
<p> textsome textsometext</p>
<div class="more_info_btn">more info</div>
<div class="ok_btn">ok</div>
</div>


</div>