css內聯塊的問題

Question

我試圖對齊一行的部分new-setstion，內聯塊的用戶部分，但是當我把它們分開的文本。

這是我的css代碼，如果你有更好的建議或批評請分享。

.page-content { 
     margin: 0 auto; 
     text-align: center; 
    } 
    div.news-section { 
     display: inline-block; 
     max-width: 500px; 
     min-width: 200px; 
     background-color: #fff; 
     word-wrap: break-word; 
     text-align: left; 
    } 
    div.user-section { 
     display: inline-block; 
     max-width: 300px; 
     min-width: 200px; 
     background-color: #fff; 
     word-wrap: break-word; 
     text-align: left; 
    } 

這是我的html代碼

<div class="page-content"> 
    <div class="news-section"> 
    <div class="news-section-header"> 
     <h2>News</h2> 
    </div> 
     <!-- content --> 
    </div> 
<div class="user-section"> 
    <div class="user-section-header"> 
    <h2>User section</h2> 
    </div> 
<form class="user-login-form" method="POST"> 
    <div><input type="email" name="user-name" placeholder="John-Doe@mail.com" /></div> 
    <div><input type="password" name="user-pass" placeholder="*****" /></div> 
    <div><input type="submit" name="sub-button" value="Login"/></div> 
    </form> 
      <!-- another div content --> 
</div> 

Answer 1

我想你想是這樣的：https://jsfiddle.net/oqvzraxs/，如果我理解正確你的問題。

我已經加入到display: inline-flex.page-content

.page-content { 
    display: inline-flex; 
    margin: 0 auto; 
    text-align: center; 
}