html - 使两个 div 位于同一条边距线上，即使浏览器的大小发生变化也保持在那里

Question

我有两个 div。一个围绕 h4，另一个围绕 p。我希望 p 位于中间，因此将其设置为 margin-left: auto;和 margin-right:auto;我不希望 h4 也位于中间，我希望将其设置为与 div 的左侧内联。

---------------page size-----------------

           ---<h4>---
           --------<p>-------
           ---In the center--
           ----of the page---
           ------------------

-----------------------------------------

这是我希望它是什么样子的一个小例子。如果我手动设置 margin-left 以适应位置，那么如果有人有不同的屏幕尺寸，那么它就不会在那里。这是一个学校元素，所以我不太擅长 html 或 css，如果它真的很简单或愚蠢，请原谅我。

Answer 1

Margin: auto 用于 Right 和 Left 将不起作用，因为它获得所有宽度。当您为元素设置固定宽度时，边距:自动工作。在这种情况下，您可以将“Text-align: center”设置为

并使其变得简单。

div{
  border: 1px solid #000;
  padding: 20px 0;
  width: 300px;
  height: 100px;
  margin: 20px auto;
}
div.h4-wrapper{
  margin: 0 0;
}
p{
  text-align:center;
}

<div class="h4-wrapper">
  <h4>On Left Side</h4>
</div>

<div>
  <p>On middle.</p>
</div>