html - 如何让div中的元素居中

标签 html css twitter-bootstrap

我使用的是 bootstrap 2.3.2。我有一个 div,里面有一些水井。这是一个Preview

我的结构是

<body>
    <div class="page-header">
         <h1 id="title">Title</h1>
    </div>

    <div class="row">
        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Text</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>

        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Textr</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>

        <div class="span3 my_span">
            <div class="well my_well">
                <h1>Textr</h1>
                <hr>
                <p>More Text</p>
                <hr>
                <button class="btn btn-primary">Button</button>
            </div>
        </div>
    </div>
</body>

井在一排div里面,如何让所有的井水平居中?

这是 jsfiddle用代码。

最佳答案

我认为这就是您所描述的:Fullscreen View

See jsfiddle

我修改了my_span:

.my_span {
    width: 300px;
    margin: 0 33px;
    float: none;
    display:inline-block;
}

并添加:

.row {
    text-align: center;
    margin: 0;
}

编辑:我稍微编辑了 fiddle 以修复边距。

关于html - 如何让div中的元素居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21411076/

相关文章:

javascript - 在从 PHP 到 DIV HTML 之间传递变量

css - 使 div 出现在事件状态

javascript - opencart 2.1.0.1 bootstrap 3.3.5 全宽下拉菜单

html - 如何将 Disqus 评论计数器集成到 Bootstrap 按钮中?

html - WordPress header 丢失

javascript - 重新加载后保存复选框状态(TODO 列表)

javascript - Firefox - 在 contenteditable 中聚焦一个段落

html - 如何缩放具有最小和最大宽度的 flexbox 元素?

css - 选择元素在网页中未正确显示

html - 为什么 Sphinx 不翻译 :kbd: roles to HTML's <kbd> tags?