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

【问题标题】：How to dynamically position paragraph at beginning of centred heading如何在居中标题的开头动态定位段落
【发布时间】：2018-10-08 05:51:35
【问题描述】：

这个问题很琐碎，但当我开始思考它时，我找不到一个简单而正确的出路。

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

我想避免的事情

JS 方法
残酷的断点方法

我想做的事

一些 sass mixin 功能
一些 HTML 容器逻辑
一些我不知道的对齐方法

默认宽度居中

宽度变大

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

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
我已经对此进行了研究，如果对任何人有帮助，我可以在这里发布我的代码。
这就是你应该做的......事实上，解决方案非常简单......如果你考虑一下。
哈哈，那请赐教，因为我已经完成了我的FE部分，但是我无法解决这个简单的问题。

标签： html css sass responsive-design

【解决方案1】：

您可以通过将标题和文本包装在 inline-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>

【讨论】：

感谢您的快速帮助，工作就像一个魅力。文本对齐：左；在 .centre div 上成功了。

【解决方案2】：

<div class="container">
    <div>
       <h1>Lorem ipsum dolor sit amet.</h1>
       <h2>Lorem ipsum dolor.</h2>
    </div>
</div>

.container{
   display: flex;
   justify-content: center;
   align-items: center;
}

https://www.codeply.com/go/i3RlmpoZMD

【讨论】：