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

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

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

Answer 2

您可以通过两种方式执行此操作； 在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文本，可以将它们两个都留有空白。 / 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>