在中间对齐div内容

Question

如何在中间显示标题，描述和表格？

HTML：

<div class="row clearfix">
    <div class="col-md-12 column splash">
        <span class="splash-heading">Welcome to PlayMaker</span>
        <span class="splash-description">Choose your city so we can tailor the results to your location</span>
        <div class="city-chooser">
            <div class="ui-widget">
                <select id="combobox">
                    <option value="">Start typing...</option>
                    {% for city in cities %}
                        <option value="{{ city }}">{{ city }}</option>
                    {% endfor %}
                </select>
            </div>

        </div>

    </div>
</div>

CSS：

.splash-left {
    float:left;
    width:50%;
}

.splash-right {
    float:left;
    width:50%;
    padding-top:145px;
}

.splash span {
    display: block;

}

.splash-heading {
    font-size: 56px;
    font-weight: 100;
    padding-top: 145px;
    color: white;
    text-align: center;
}

.splash-description {
    font-size: 20px;
    font-weight: 100;
    color: white;
    text-align: center;
}

Answer 1

试试这个：

.splash{
margin: 0 auto;
text-align: center;
display: table;/*force to center*/
}

Answer 2

只需使用bootstrap类的text-center

Doc ： http : //getbootstrap.com/css/#type-emphasis =>对齐区域

Bootply ： http ： //www.bootply.com/122696

HTML ：

<div class="row clearfix">
    <div class="col-md-12 column splash text-center">  // <---- HERE
        <span class="splash-heading">Welcome to PlayMaker</span>
        <span class="splash-description">Choose your city so we can tailor the results to your location</span>
        <div class="city-chooser">
            <div class="ui-widget">
                <select id="combobox">
                    <option value="">Start typing...</option>
                        <option value="{{ city }}">{{ city }}</option>
                        <option value="{{ city }}">{{ city }}</option>
                        <option value="{{ city }}">{{ city }}</option>
                        <option value="{{ city }}">{{ city }}</option>
                        <option value="{{ city }}">{{ city }}</option>
                        <option value="{{ city }}">{{ city }}</option>
                        <option value="{{ city }}">{{ city }}</option>
                </select>
            </div>

        </div>

    </div>
</div>

Answer 3

这应该工作：

.splash span {
    display: block;
    margin: 20px auto 0 auto;
    width: 100px; /* your width */
}

Answer 4

你的意思是？ 在浏览器窗口的中间显示所有3个，如果是，则-

• 首先在<div class="row clearfix">之前添加一个名为<div class="container">的父div。 像这样 -

  <div class="container"> <div class="row clearfix"> ---- your other div content here ---- </div> <!--row--> </div> <!--container-->

• 然后在'col-md-12'类旁边添加引导类'text-center'

• 然后在样式表中添加以下CSS：

  .city-chooser { display: inline-block; width: auto; }

它应该可以帮助您。

Answer 5

.column.splash{text-align:center; display:block;}