html - 如何在 HTML 中创建“复杂”标题？

Question

我想在 HTML 中创建一个标题，但我犯了一些错误，无法弄清楚我是如何以正确的方式做到这一点的。

这就是我尝试这样做的方式：

    .xyz-logo {
    float:left;
    width:472px;
    
    }

    .headerlayout h1{
    position:center;
    font-family: Arial, Helvetica, sans-serif ;
    font-size: x-large;
    width:1920px;
    height:200px;
    background:lightgrey;
    }

      <div class="headerlayout"> 
         <img class="xyz-logo" src="C:\Users\..."  alt="Logo">   
         <h1 >This is the title</h1>               
      </div>

这是它的外观图片：

标签： htmlcssheader

Answer 1

正如 Paul 所提到的，您可以使用 Flexbox 或 Grid 来解决它，但是如果您想要一些简单的东西可以玩，这里有一个使用绝对定位的解决方案。只需更改顶部、左侧和底部的值即可更改其位置。标题中的变换总是居中。

  .headerlayout{
      position: relative;
      width: 100%;
      background-color: lightgrey;
      height: 200px;
    }
    
    .xyz-logo {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .headerlayout h1{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 35px;
      
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%);
    }
    
    .something{
      position:absolute;
      bottom:0%;
      left:0%;
    }

<div class="headerlayout"> 
      <img class="xyz-logo" src="C:\Users\..."  alt="Logo">   
      <h1>This is the title</h1>    
      <div class="something">Something that changes</div>
  </div >


  

在此处输入链接描述