CSS，想要将一个项目对齐到居中的div的左侧，并且周围有一些间距？

Question

我有一个容器div，有两个孩子div：

<div id="container">

    <div id="child1">
    I want this to be displayed next to the child2 div, 
    but offset to the right by about 3em. Basically, 
    I want spacing between it and the second child, 
    but I want the second child to remain centered.
    </div>

    <div id="child2">
    I want this to be centered on the page
    </div>

</div>

我试图找出如何保持第二个孩子沿着页面水平居中，同时在它和第一个子div之间添加一些间距。有谁知道如何做到这一点？我正在使用以下css，但无法让第二个div在它和第一个div之间有填充。

我有以下css，但不能让它工作：

#container {
    margin: auto;
    text-align: center;
}
#child1, #child2 {
    display: inline-flex;
    float: left;
}

Answer 1

#container {
    margin: auto;
    text-align: center;    
}

#container #child1{
  border: 5px solid red;  
  margin-right:30%;
/*margin-right:50%;*/
}


#container #child2{
  border: 5px solid green;  
  margin-left:30%;
  margin-right:30%;
}

<div id="container">

    <div id="child1">
    <p>I want this to be displayed next to the child2 div, 
    but offset to the right by about 3em. Basically, 
    I want spacing between it and the second child, 
    but I want the second child to remain centered.</p>
    </div>
<br>
<br>
    <div id="child2">
      <p>I want this to be centered on the page</p>
    </div>

</div>

Hey Jason, I hope you are doing well.

您可以控制div的边距，以中心为单位将左右设置为30％，并将潜水设置在屏幕的左侧，您将向右边添加30％的边距，因此它正在推动远离屏幕右侧30％，如果您希望它远离屏幕右侧并且最靠近左侧，则可以增加到50％。

enter image description here

enter image description here

Answer 2

使用flex怎么样？我不知道我是否弄明白你的意思。但flex是一个很好的布局工具。这里有一个很好的flex指南：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

#container {
    margin: auto;
    display:flex;
    flex-direction:column;
}
#child1{
  padding-right:3em;
}
#child2 {
  padding-top:3em;
  align-self: center;
}

<div id="container">
    <div id="child1">
    I want this to be displayed next to the child2 div, 
    but offset to the right by about 3em. Basically, 
    I want spacing between it and the second child, 
    but I want the second child to remain centered.
    </div>
    <div id="child2">
    I want this to be centered on the page
    </div>
</div>