将标题/标题与文本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

有两种方法可以做到这一点;将margin-left添加到div h2标记或添加容器

.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>

Answer 2

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

.col-sm {
  display: flex;
  flex-direction: row;
  margin-left: 10%;
}

img {
  width: auto;
  margin-left: 10px;
}

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

我希望它能解决你的问题。