对齐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/