Question

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

我想让我的标题居中，然后我想让我的段落与标题的开头保持一致。另外我希望段落在所有低至770px的设备上响应标题

我想避免什么

JS方法
野蛮断点接近

我想做什么

一些混合功能
一些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>

Answer 1

您可以通过将标题和文本包装在内联块元素中然后左对齐文本来实现此目的

请注意，如果您的文字应该比标题长，那么它将居中并且标题左对齐 - 即最长的项目将居中

function onSuccess1(responese, control) {

    var chk = control;
    var controlarr = String(chk).split(',');
    if (controlarr.length == 1) {
        control.empty().append('<option value=0 selected="selected">Select</option>');
        if (responese.d != null) {
            $.each(responese.d, function () {
                control.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
        hideload();
    }
    else {
        $.each(controlarr, function (index, values) {
            var controls = $('#' + values);

            controls.append('<option value=0 selected="selected">Select</option>');
            $.each(responese.d[index], function () {
                controls.append($("<option></option>").val(this['Value']).html(this['Text']));
                hideload();
            });
        });
    }
};

.outer {
  /* put background on here */
  text-align: center;
}

.centre {
  display: inline-block;
  text-align: left;
}

Answer 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

如何在中心标题的开头动态定位段落

2 个答案: