我如何离开中心＆＃39;调整所有设备上的内容以保持对css的响应能力？

Question

我有一个标题和段落的文字。它目前保持对齐（截图1）。我想将标题和段落移动到页面的中间，压缩段落的内容以形成一个整齐的矩形，但也保持左对齐。我想设计这个，以便标题和文字在不同的设备上保持这种布局（屏幕截图2），并且文本不会被切断，例如，在手机上。

这是我的带文字的页面：

这就是我希望我的页面看起来像：

Answer 1

我无法查看您的照片。

但是既然您想移动内容，可以考虑在margin-left中使用padding-left或<style></style>

压缩段落的宽度以制作整齐的矩形，您可以考虑使用width = 100%或使用fixed width respective to the rectangle you want to align to.

为防止文字被截断，您可以设置position = relative;或position= fixed;游戏，以查看符合您要求的内容。

Answer 2

我希望你也包括你的html css。但我想你可以通过使用边距来做到相当容易。 例如

   p{
     Margin: 0 auto;
}

Answer 3

做这样的事情：

<div class="wrapper">
  <div class="mycontent">
   I'm so centered it's crazy!
  </div>
</div>

<style>
  .wrapper {
      display: block;
  }
  .mycontent {
      position: relative;
      top: 0;
      left: 0;
      width: 768px;
      height: auto;
      margin: 0 auto;
  }
</style>

Answer 4

扩展上述答案，您只需将margin-left或padding-left与指定参数一起使用，然后拨打media queries以在不同设备参数中指定这些路线。

例：

@media only screen and (max-width: 768px) {
h1, p {
    margin-left: 5%;
    }
}

Answer 5

您可以使用Flexbox执行此操作。

  .container {
    display: flex;
    flex-flow: column nowrap;
  }
  .child {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }
  h1, p {
    background-color: black;
    color: white;
  }

<div class="container">
  <div class="child">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut diam sit amet sapien congue sodales vel a purus. Sed eget libero et sem rhoncus dignissim tempus nec lectus. Vivamus varius ullamcorper dui, nec placerat tellus laoreet sit amet. Sed aliquam augue enim, et scelerisque ex volutpat sed. Pellentesque pretium metus diam, ut vulputate tortor hendrerit et. Nullam luctus magna eget nibh pharetra semper. Nunc nisi metus, mollis eget felis id, tristique dapibus arcu. Pellentesque efficitur tortor auctor elit molestie porta. In nec vulputate lorem. Morbi imperdiet gravida sapien vitae varius. Nulla id congue augue. Donec pretium tellus at felis egestas consectetur. Sed efficitur, ante eget semper consequat, lacus ligula varius diam, tristique lobortis lectus elit eget arcu. Nullam et ex pellentesque, lobortis orci sed, pellentesque ante. Fusce ac ex sapien. Aliquam aliquet odio eu auctor eleifend.</p>
  </div>
</div>