html - 我将如何实现这种 CSS 效果(居中内容和填充)？

Question

我想知道如何实现这种效果。首先，内容当前位于名为“contentDiv”的 div 中。我有以下所有内容 float:right of the div。我想要实现的是内容无法跨越的假想边界(查看图片)。 然后我希望内容居中。 我将如何使用 CSS 实现这一目标？或者我可以使用哪些元素来复制这种效果。 我已经研究过将内容居中，这段代码对我有用 -

margin-left: auto;
margin-right: auto;

Answer 1

#contentDivParent {
    /*It will define the imaginary border*/
    padding-left:30%;
    width:70%;
}

#contentDiv {
  /*remove the float*/
  float:none;
  /*center*/
  margin:0px auto;
  /*force line-break*/
  max-width:100%;
}