Question

我有一些项目，我试图在我的网站页面的中心水平和垂直对齐，使用Twitter引导，以便它是移动响应但它不会水平对齐。

我确定它与图像，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属性规则。我给你写了一个箱子here

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

.flex {
  display: flex;
}

如何在中心水平对齐这些div？

1 个答案: