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>

创建居中的GDPR标语

1 个答案: