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; 
}