Html 如何在div中居中放置元素_Html_Css_Twitter Bootstrap

Html 如何在div中居中放置元素

html css twitter-bootstrap

Html 如何在div中居中放置元素,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我使用的是bootstrap 2.3.2。我有一个潜水舱，里面有几口井。这是一个我的结构是 <body> <div class="page-header"> <h1 id="title">Title</h1> </div> <div class="row"> <div class="span3 my_span"> <div

我使用的是bootstrap 2.3.2。我有一个潜水舱，里面有几口井。这是一个

我的结构是

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


标题
正文

更多文本

按钮
短信

更多文本

按钮
短信

更多文本

按钮

井位于一排井内，如何将所有井水平居中

下面是代码的示例。

只需使用

margin:0 auto

将div设置为居中即可

 .my_span {
     width: 300px;
     margin: 0 auto;
 }

我想这就是你所描述的：

我修改了我的代码：

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

并补充说:

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

编辑：我稍微编辑了一下小提琴来修正边距。

你可以这样做

.parent-of-centered-div {
    text-align: center;
}
.centered-div {
    display:inline-block;
    width: 20px; /* needs fixed width */   
}

我建议

@media（最大宽度：767px）{.my_span{margin:0auto；}}

这根本不会使div居中？你们知道吗，你们绝对正确。我的小提琴屏幕很小，所以我最终得到了一列垂直居中的div。如果OP希望将一行div居中，那么这是完全错误的答案。我道歉。