對齊div和按鈕，並保持模式運作

Question

我是CSS的新手，所以這可能是一個非常基本的問題，但我到處搜索，完全卡住了。

我有一個div和兩個按鈕。一個按鈕打開一個模式。這很多工作。

我不能讓div垂直對齊我的按鈕。當我把所有東西放在一個新的父母div中，模式/按鈕堆疊在另一個之上並停止運行。

我的代碼是在這裏：https://jsfiddle.net/k3eL99ub/

<div id="page1" class="landing-page"> 
    <a id="link-lp"></a> 
    <div class="logo-sketch">Logo here</div> 
    <button id="about-button">about</button> 
    <button id="work-button">work</button> 
    <div id="about-modal"> 
    <div id="about-modal-content"> 
     <span class="close">&times;</span> 
     <p class="about-text">stuff here</p> 
    </div> 
    </div> 
</div> 

.landing-page { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.logo-sketch { 
    position: relative; 
    clear: both; 
    border: 2px solid black; 
} 

button { 
    display: inline; 
    border: none; 
    background: none; 
    outline: none; 
    font-family: Montserrat; 
    font-size: 1.3em; 
    text-decoration: none; 
    text-align: center; 
    cursor: pointer; 
    width: 10%; 
} 

.about-button { 
    float: left; 
    margin-right: 50px; 
} 

button.work-button { 
    float: right; 
    margin-left: 50px; 
} 


/*about modal styling*/ 

#about-modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
} 

#about-modal-content { 
    background-color: #fff; 
    margin: auto; 
    padding: 20px; 
    border: 2px solid #000; 
    width: 50%; 
    text-align: left; 
} 

.close { 
    color: #000; 
    float: right; 
    font-size: 32px; 
    font-weight: bold; 
} 

.close:hover, 
.close:focus { 
    text-decoration: none; 
    cursor: pointer; 
} 

謝謝！

Answer 1

有更多的方法可以做到這一點最容易改變你的HTML結構。例如這樣的：

<div class="logo-sketch">Logo here</div> 
    <div id="page1" class="landing-page"> 
     <a id="link-lp"></a> 

     <button id="about-button">about</button> 
     <button id="work-button">work</button> 
     <div id="about-modal"> 
     <div id="about-modal-content"> 
      <span class="close">&times;</span> 
      <p class="about-text">stuff here</p> 
     </div> 
     </div> 
    </div> 

這裏是JSFindle https://jsfiddle.net/987sp7ex/