これらのdivを中央でどのように水平に整列できますか？

Question

私は自分のサイトページの中央に、水平方向と垂直方向に整列しようとしているアイテムを持っています。これは、モバイルレスポンスですが、水平方向に整列しないようになっています。

私は画像、ulリスト、およびpタグの組み合わせと関係があると確信しています。誰か助けてもらえますか、私は運がない2週間これを修正しようとしています。すべての提案を歓迎し、事前に感謝！

HTML：

<div class="row-fluid" id="trial"> 
    <div class="span4"> 

     <div style="display:inline-block;"> 
      <div align="center"> 
      <img src="http://mysite/wp-content/uploads/2016/05/socialmediatoo.png" width="150" height="auto"/> 
      </div> 
     </div> 
     <div style="display:inline-block;"> 
      <div align="center"> 
      <ul class="testli"> 
       <li><a target="_blank" href="http://mysite/information">About Us</a></li> 
       <li><a target="_blank" href="http://mysite/information">FAQ's</a></li> 
       <li><a target="_blank" href="http://mysite/information">Contact Us</a></li> 
       <li><a target="_blank" href="http://mysite/information">Work With Us</a></li> 
       <li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li> 
       <li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li> 
       <li><a target="_blank" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li> 
      </ul> 
     </div> 
     </div> 
     <div style="display:inline-block;"> 
      <div align="center"> 
      <div id="test-div"> 
       <p>become a driver</p> 
       <p>As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in join our team click the button below to see the available opportunities we have available.</p> 
       <input type="submit" id="test-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/> 
      </div> 
      </div> 
     </div> 
     <div style="display:inline-block;"> 
      <div align="center"> 
      <img src="http://mysite/wp-content/uploads/2016/04/open247.png" width="150" height="auto"/> 
      </div> 
     </div> 


    </div> 
</div> 

はCSS：

#social-logo { 
    width: 180px; 
    height: auto; 
    background-image: url('http://mysite/wp-content/uploads/2016/05/DEVO_socialmediatoo.png'); 
    background-size: 140px auto; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-color: transparent; 
    display: inline-block; 
} 
#trial { 
    height: auto; 
    width: 100%; 
    background-color: pink; 
} 
#drinkaware { 
    width: 156px; 
    height: 50px; 
    display:list-item; 
    background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png'); 
    background-size: 150px auto; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-color: transparent; 
    vertical-align: top; 
    list-style-type: none !important; 
} 
#open24 { 
    display: inline-block; 
    width: 200px; 
    height: auto; 
    background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png'); 
    background-size: 250px auto; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-color: transparent; 
} 

Answer 1

あなたはフレキシボックスを使用して正当化する-contentプロパティのルールを追加することができます。私はあなたにビンを書きましたhere

.block { 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
} 

.flex { 
    display: flex; 
}