html - 将标题/页眉与文本 HTML、CSS 对齐

Question

我使用居中的 div 来包含图像和一些文本，但希望我的标题与文本具有相同的边距/对齐方式。现在，标题位于页面的最左侧，我希望它在左侧有响应式边距。

.row {
  margin: auto;
  max-width: 1150px;
  display: flex;
  align-items: center;
  img {
    width: auto;
  }
}

<div class="container-fluid">
  <h1>Choosing a Console</h1>
  <div class="row">
    <div class="col-sm" id="textbox">
      <p>
        Some Text
      </p>
    </div>
    <div class="col-sm" id="img">
      <img style="height: 350px" src="which.png" alt="Which One">
    </div>
  </div>
</div>

Answer 1

有两种方法可以做到这一点；在div h2标签中添加margin-left或者添加容器

.row {
        margin: auto;
        max-width: 1150px;
        display: flex;
        align-items: center;

        img {
            width: auto;
        }
    }
    
    .container-fluid h1 {
      margin-left: 150px;
    }

或者您可以像我一样将它复杂化并包含容器，我添加了边框轮廓以便您了解该容器包含的内容，如果您希望移动 h1 和 p 文本，您可以将它们都留边距。

.row {
  max-width: 1150px;
  height: auto;
  border: 1px solid red;
}

.rowTextContainer {
  float: left;
  width: auto;
  margin-left: 50px;
}

.rowText {
  text-align: center;
  border: 1px solid blue;
}

.row img {
  width: auto;
  padding-left: 20px;
}

<div class="row">
  <div class="rowTextContainer">
    <div class="rowText">
      <h1>Title Text</h1>
      <p>Text here.</p>
    </div>
  </div>
  <img src="https://via.placeholder.com/350.png">
</div>