文本不是在div中寫在頂部，而是在中間寫得很少

Question

我想使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> 

Answer 1

只需將h1標簽的line-height屬性設置為20px並從窗口容器中刪除display：inline-flex。 那應該可以了。 干杯。

Answer 2

檢查我的小提琴的分叉版本
1-無需為相同樣式的windows1, windows2使用不同的類
2-表格方法對於您的目標可能更可靠，只需向您的父母添加一個框並display:table寬度display:table就可以實現您的目標

https://jsfiddle.net/royeeLsq/3/

 body{ background:#333; } .windowsbar { width: 80%; height: 100px;; background-color: white; margin: 5px auto; line-height: 110px; text-align: center; } .windows { background: white; height: 200px; text-align:center; } .table{ display:table; width:80%; margin:0 auto; } .table-cell{ padding:0 5px; display: table-cell; width:50%; } .windows h1 { font-size: 20px; text-align: center; top: 0; } 

 <div class="windowsbar"> <h1>Windows Software</h1> </div> <div class="table"> <div class="table-cell"> <div class="windows"> <h1>nvidia hardware</h1> </div> </div> <div class="table-cell"> <div class="windows"> <h1>test</h1> </div> </div> </div> 

Answer 3

.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>