将 div 内容居中对齐答案

【问题标题】：Align div contents in the middle将 div 内容居中对齐
【发布时间】：2014-03-18 19:31:28
【问题描述】：

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

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;
}

【问题讨论】：

你能装个小提琴吗？

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个：

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

【讨论】：

它将图像移到了位置，但没有改变元素的位置

【解决方案2】：

只需使用引导类text-center

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

引导层：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>

【讨论】：

【解决方案3】：

这应该可行：

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

【讨论】：

【解决方案4】：

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

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

<div class="container"> <div class="row clearfix"> ---- your other div content here ---- </div>  </div> 
然后在“col-md-12”类旁边添加引导类“text-center”
然后在您的样式表中添加以下 css：

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

它应该对你有帮助。

【讨论】：

【解决方案5】：

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

【讨论】：