如何將這些div在中心水平對齊？

Question

我正在嘗試使用twitter bootstrap在我的網站頁面中心水平和垂直對齊一些項目，以便它具有移動響應性，但不會水平對齊。

我確定它與圖片，ul列表和p標簽的組合有關。 有人可以幫忙嗎，我已經嘗試修復了兩個星期，沒有運氣。 歡迎所有建議，並先謝謝您！

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

您可以使用flexbox並添加justify-content屬性規則。 我在這里給你寫了一個垃圾桶

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

.flex {
  display: flex;
}