html - 如何在居中标题的开头动态定位段落

Question

这个问题微不足道，但当我开始思考它时，我找不到简单而正确的出路。

我想让我的标题居中，然后我想让我的段落与标题的开头对齐。此外，我希望该段落在所有设备上与标题响应对齐，小至 770 像素

我想避免的事情

1. JS方法

2. 残酷的断点方法

我想做什么

1. 一些 sass 混合功能

2. 一些 HTML 容器逻辑

3. 一些我不知道的对齐方法

默认宽度居中

宽度变大

.container .intro-panel {
  width: 100%;
  height: 650px;
  background-image: url(https://i.imgur.com/M7gDO41.jpg);
  background-size: cover;
  position: relative;
  color: white;
  padding-top: 130px;
  box-sizing: border-box;
  font-family: Shrikhand; }
  .container .intro-panel h1 {
    font-size: 36px;
    text-align: center;
    letter-spacing: 20px;
    text-indent: 30px;
    text-transform: uppercase; }
  .container .intro-panel p {
    font-size: 16px;
    margin: -25px 0 0 -25.5%;
    letter-spacing: 2px;
    text-align: center; }
  .container .intro-panel .button-wrap {
    width: 100%;
    margin-top: 160px; }
    .container .intro-panel .button-wrap .see-more {
      margin: 0 auto;
      width: 280px;
      height: 40px;
      line-height: 44px;
      cursor: pointer;
      font-size: 25px;
      text-align: center;
      margin-top: 140px;
      background-color: #003DE8;
      -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }

<div class="container">
  <div class="intro-panel" data-tilt>
      <h1 class="intro-name title">Edgars Pavuls</h1>
      <p>Professinal Web Application Developer</p>
      <div class="button-wrap">
          <div class="vibrate-3 see-more">
              See More
          </div>
      </div>
  </div>
</div>

Answer 1

您可以通过将标题和文本包装在行内 block 元素中然后左对齐文本来实现这一点

请注意，如果您的文本应该比您的标题长，那么文本将居中并且标题与其左对齐 - 即最长的元素将居中

.outer {
  /* put background on here */
  text-align: center;
}

.centre {
  display: inline-block;
  text-align: left;
}

<div class="outer">
  <div class="centre">
    <h1 class="heading">This is some long text</h1>
    <p class="text">some other text</p>
  </div>
</div>