创建居中的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>

​