如何水平对齐两个 div，而不让左边的 div 向左浮动？

Question

我有 2 个 div 元素，我想在我的页面中居中。 outter div 是 100% 宽度和 text-align：中心。像这样：

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

其中包含的两个元素应该并排显示但居中（它们都只是 div 带有文本内容）。简而言之，我希望我的页面上有一个居中的标题，标题的两个词中的每一个都是单独的 div。我读到您执行以下操作来完成此操作：

float: left;
clear: none;

据我所知，'clear' 没有任何可见的效果。当我将 float: left 添加到两个元素中的第一个时，它只会使该元素一直滑动到外部 .centerpanel 的最左侧，而紧随其后的元素则保持在它应该在的中间位置.所以它肯定正确对齐但莫名其妙地将它一直发送到左侧。

如何使其与其后续元素保持垂直对齐，但保持遵守外部 div 的 text-align: 中心？

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而不使用任何浮动。

旁注：

当然还有更现代的清除浮动的方法。其中之一是在浮动的 div 的容器上设置 overflow 属性。更多相关信息：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，而不让左边的 div 向左浮动？

How do I align two divs horizontally without the left one floating left?

html

css

alignment