如何水平对齐两个div而左边没有左边的？(How do I align two divs horizontally without the left one floating left? [duplicate])

我有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;

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

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

This question already has an answer here:

Align <div> elements side by side 3 answers

I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:

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

The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:

float: left; clear: none;

As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.

How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?

最满意答案

你也可以使用display:inline-block; 关于你的孩子元素。 查看此小提琴 ，了解如何完成此操作的示例。

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%; }

You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.

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%; }如何水平对齐两个div而左边没有左边的？(How do I align two divs horizontally without the left one floating left? [duplicate])

我有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;

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

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

This question already has an answer here:

Align <div> elements side by side 3 answers

I have 2 div elements I want centered in my page. The outter div is 100% width and text-align: center. Like so:

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

The two elements contained within it should appear next to each other but centered (they're both simply divs with text content). Simply put, I want a centered title on my page, each of the two words of the title being a seperate div. I read that you do the following to accomplish this:

float: left; clear: none;

As far as I can tell, the 'clear' does not have any visible effect. When I add the float: left, to the first of the two elements, it simply causes that element to slide all the way to the extreme left of the outer .centerpanel while the element that follows it remains out in the middle where it should be. So it's definitely aligning it properly but inexplicably sends it all the way to the left.

How do I make it stay vertically aligned with it's following element but keep obeying the outer div's text-align: center?

最满意答案

你也可以使用display:inline-block; 关于你的孩子元素。 查看此小提琴 ，了解如何完成此操作的示例。

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%; }

You can also use display:inline-block; on your child elements. View this Fiddle for an example of how to accomplish this.

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%; }