页面中的元素根据屏幕大小更改位置

Question

我放置在页眉布局上的元素不随屏幕尺寸调整。元素在页面上飞来飞去。我希望元件保持在“全屏”视图中的位置。我是CSS的新手，所以不确定要使它们响应的属性。谢谢

全屏 调整后的屏幕

HTML

<header>
 <p class=ramly>RamlY</p><image class=logo src="images/logo.png" height=100px 
 width=200px></image><p class=burger>BurgeR</p>
</header>

CSS

 header{
    background-color:#8e474c;
    line-height: 15px;
    font-size: 18px;
    border-width:2px;  
    border-style:solid;
    border-color:#d7dbdd;
    width:100%;
    height:15%
}
 p.ramly{
    font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
    color: #fff;
    text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
    font-style:normal;
    font-size:150px;
    margin-top:35;
    float:left;
    margin-left:250px;
    margin-right:0px;                   
}
p.burger{
    font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
    color: #fff;
    text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
    font-style:normal;
    font-size:150px;
    margin-top:35;
    float:right;
    margin-left:0px;
    margin-right:220px;
}
.logo{
    margin:0px;
    padding:0px;
    position:static
}

Answer 1

Flexbox可能是您需要的答案。

使用Flexbox，每个伸缩项目（case PathList("org", "objectweb", "asm", "ClassVisitor.class") => new IncludeFromJar("asm-5.0.3.jar")）都会在您缩放页面大小时自动扩展和缩小。您还可以在每个项目上应用水平居中（flex: 1）或垂直居中（justify-content: center），以在其伸缩容器内居中。

align-items: center

header {
  background-color: #8e474c;
  height: 15%;
  display: flex;
  font-family: 'Cookie';
}

.logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ramly {
  color: white;
  flex: 1;  
  display: flex;
  justify-content: center;
  align-items: center;
}

.burger {
  color: white;
  flex: 1;  
  display: flex;
  justify-content: center;
  align-items: center;
}