将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

只需使用引导类text-center

即可

文档：http://getbootstrap.com/css/#type-emphasis =＆gt;对齐区域

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="container">之前添加一个名为<div class="row clearfix">的父div。像这样 -

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

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

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

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

它可以帮助你。

Answer 5

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