Question

我想在页面中居中使用2个div元素。 out div是100％宽度和text-align：center。像这样：

    div.centerpanel {
    font-size: 28px;
    width:100%;
    height:100%;
    text-align: center;
}

其中包含的两个元素应该彼此相邻但是居中（它们都只是带有文本内容的div）。简单地说，我想在我的页面上设置一个居中的标题，标题的两个单词中的每一个都是一个单独的div。我读到你执行以下操作来完成此任务：

float: left;
clear: none;

据我所知，＆＃39;清除＆＃39;没有任何明显的效果。当我将float：left添加到两个元素中的第一个时，它只会导致该元素一直滑到外部.centerpanel的最左边，而后面的元素仍然在它应该的中间位置。。因此，它确实正确地对齐它，但莫名其妙地将它一直发送到左边。

如何让它与其后面的元素保持垂直对齐，但是要遵守外部div的text-align：center？

Answer 1

如果我理解你的问题，那么你想要的就是这样。当然，不止一种方法可以给猫皮肤。

<强> HTML：

<div class="centerpanel">
        <div class="left">L</div>
        <div class="right">R</div>
    <div class="clearfix"></div>
</div>

<强> CSS：

.centerpanel {
    font-size: 28px;
    width:100%;
    height:100%;
    text-align: center;
}

.centerpanel div{
    width: 50%;    
}

.left{
    float: left;
}

.right{
    float: right;
}

.clearfix{
    clear: both;
}

jsFiddle：http://jsfiddle.net/nfpdpmze/2/

由于此处只有两个div，您还可以在不使用任何浮选的情况下设置display: inline-block。

旁注：

当然有更现代的清算浮动方式。其中之一是在overflow的容器上设置div属性。更多相关信息：https://css-tricks.com/all-about-floats/

Answer 2

您还可以在子元素上使用display:inline-block;。查看此Fiddle以获取如何完成此操作的示例。

HTML：

<div class="centerpanel">
<div class="leftpanel">Left</div><div class="rightpanel">Right</div>
</div>

CSS：

div.centerpanel {
font-size: 28px;
width:100%;
height:100%;
text-align: center;
}
.leftpanel {
background:red;
display:inline-block;
width:50%;
}
.rightpanel {
background:blue;
display:inline-block;
width:50%;
}

Answer 3

你走了：

<div style="display:flex">
                <div style="text-align:center">
                    <span>Content1</span>
                </div>
                <div style="text-align:center">
                    <span>Content2</span>
                </div>
            </div>

如何水平对齐两个div而左边没有左边的？

3 个答案: