html - 文本不是在div中写在顶部，而是在中间写得很少

我想使Nvidia硬件成为div顶部中心的标题，并且在右框中提供相同的CSS，但与其说是Nvidia硬件，不如说是AMD硬件。我的问题是标题写在一个非常奇怪的地方，离中心有点远。

https://jsfiddle.net/royeeLsq/ --------（拉伸结果框，使两个框与显示Windows的div对齐）

    .windowsbar {
    width: 80%;
    height: 100px;;
    background-color: white;
    margin: 0 auto;
    line-height: 110px;
    text-align: center;
    }

    .windows1, .windows2 {
    background: white;
     display: inline-flex;
    width: 49.7%;
    height: 200px;

    }

    .windows1 h1 {
    font-size: 20px;
    text-align: center;
    top: 0;
    }

<div class="windowsbar">
    <h1>Windows Software</h1>

    <div class="windows1">
    <h1>nvidia hardware</h1>
        </div>

    <div class="windows2">
        <p>test</p>
        </div>

    </div>

最佳答案

.windowsbar {
    width: 80%;
    height: 100px;;
    background-color: white;
    margin: 0 auto;
    line-height: 110px;
    text-align: center;
 }

 .wrapper {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
}

.window {
    flex: 40%; /* Important */
    background: white;
    margin: 1em;
    height: 200px;
    display: flex;
    align-items: start;
    justify-content: center;
}

.window h1 {
    margin: 0;
    padding: 0;
}

的HTML

 <div class="windowsbar">
    <div>
      <h1>Windows Software</h1>
    </div>

    <div class="wrapper">
      <div class="window">
        <h1>nvidia hardware</h1>
      </div>

      <div class="window">
        <h1>amd</h1>
      </div>
            <div class="window">
        <h1>intel hardware</h1>
      </div>

      <div class="window">
        <h1>Qualcomm</h1>
      </div>
    </div>
</div>

关于html - 文本不是在div中写在顶部，而是在中间写得很少，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47124513/