0

我有一个 div 元素需要居中：

<div style="width:800px;margin:0 auto;color:#000;"><h3 style="float:left;color:#000;margin:0 10px;"> Test </h3><h4 style="float:left;padding-top:3px;"> | </h4><h3 style="color:#000;float:left;margin:0 10px;"> Test </h3></div>

但是，所有元素都停留在左侧。如何解决此问题并将所有 h3 和 h4 居中？

这是我的例子：http ://approvemyride.ca/reno/

4

2 回答 2

2

http://jsfiddle.net/ZeJdc/

HTML： 

<div>
    <h3> Test </h3>
    <h4> | </h4>
    <h3> Test </h3>
</div>

CSS： 

div {
    width: 800px;
    margin: 0 auto;
    color: #000;
    text-align: center;
}

h3 {
    color: #000;
    margin: 0 10px;
    display: inline-block;
}

h4 {
    padding-top: 3px;
    display: inline-block;
}

检查一下，让我知道你的想法，如果你第一次打开它时它看起来不居中，试着把小分隔线向左拉伸，给结果窗格更多的空间。

澄清一下，display:inline-block是什么允许所有标题显示在同一行，而text-align:center将所有标题元素集中在<div>.

于 2013-08-15T20:31:14.103 回答
0

每当我面对任何浮动容器水平居中时，我都会使用以下内容。尝试用这些包装你的标记（需要居中；div在你的情况下）：

<div class="center_outer">
    <div class="center_inner">
        <!-- Put your contents here (which needs to be centered) -->
    </div>
</div>

CSS：

.center_outer
{
    position: relative;
    left: 50%;
    float: left;
}
.center_inner
{
    position: relative;
    left: -50%;
}

检查： http: //jsfiddle.net/jduDD/1/（我已经删除了width样式）

于 2013-08-15T20:27:08.417 回答