Question

我有一个<h1>元素和三个div，宽度为33％。所有这4个元素都在容器中，高度设置为100vh。

此刻我可以水平对齐三个div，但是当我插入<h1>标签时，它会在它们旁边对齐。

如何将<h1>置于顶部，将其下方的三个元素对齐在页面中央？

.outside {
  background-color: red;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inside {
  background-color: yellow;
  width: 30%;
  margin-left: 1.5%;
  margin-right: 1.5%;
  float: left;
}

<div class="outside">
  <div>
    <h1> This is another</h1>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>
  <div class="inside">
    <h1>This is h1 tag</h1>
    <p>This is paragraph</p>
  </div>

</div>

My JSFiddle is here

Answer 1

因为你的h1位于＆＃34;外面＆＃34; div，和黄色方框一样。所以你需要添加另一个div，一个用于包含h1，另一个用于包含黄色框。

所以结构会是这样的：

<div class="container">
  <div class="h1"><h1>hello</h1></div>
<div class="yellowcontainer">
  <div class="yellows"><h1>yellow</h1></div>
</div>
</div>

然后将flex仅添加到div类h1和yellowcontainer，因为如果将它添加到整个容器中，则h1和yellowcontainer将希望彼此相邻。

Answer 2

您可以设置不同的宽度或弹性值并重置边距以允许容器转到中心。

https://jsfiddle.net/qdp1g7r0/6/

＆＃13;

    public static void AddFields(string filePathIn, string filePathOut, List<Models.Pdf.FieldModel> fields)
    {
        var lic = new License();
        lic.SetLicense("Aspose.Total.lic");

        FormEditor formEditor = new FormEditor();
        formEditor.BindPdf(filePathIn);

        foreach (var field in fields)
        {
            foreach (var instance in field.Instances)
            {
                var llx = instance.Left;
                var lly = instance.Bottom;
                var urx = instance.Left + instance.Width;
                var ury = instance.Bottom + instance.Height;
                formEditor.AddField(field.FieldType, field.Name, field.Value, instance.PageNumber, llx, lly, urx, ury);
            }
        }

        formEditor.Save(filePathOut);
    }

＆＃13;

.outside {
  background-color: red;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.inside {
  background-color: yellow;
  flex:1 1 30%;
  margin:0  1.5% auto;

}

.outside > div:first-of-type {
 flex:1 1  100%;
 margin:auto 0 0;

}

＆＃13;

Answer 3

将h1和.inside元素划分为.outside元素中的两个不同部分。
将.outside设为flex-direction: column。
将.inside的容器设置为flex-direction: row（默认设置）
此外，避免在灵活容器（explanation）中使用保证金和填充的百分比。

＆＃13;

.outside {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: red;
  flex-direction: column;     /* new; overrides default flex-direction: row */
}

section {
  display: flex;             
  flex-direction: row; 
}

.inside {
  width: 30%;
  margin-left: 1.5%;          /* not recommended; don't use percentage margin ... */
  margin-right: 1.5%;         /* or padding on flex items... */
  background-color: yellow;   /* https://stackoverflow.com/a/36783414/3597276 */
}

＆＃13;

<div class="outside">
  <h1>This is another</h1>
  <section>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
    <div class="inside">
      <h1>This is h1 tag</h1>
      <p>This is paragraph</p>
    </div>
  </section>
</div>

＆＃13;

Revised Fiddle

使用flexbox垂直居中标题元素和内联div组

3 个答案: