如何使用CSS将两个块中间有一些间隙居中？

Question

我想达到的是以下设计:

两个文本块之间有一些间隙在页面中线对齐(参见图片).

我试图玩弄float财产,使用margin并padding获得差距,但我不能让它们居中.

编辑: 我忘了表示箭头显示可调整大小的部分:所以,页面宽度必须可调整,而文本本身不是,但文本是动态内容,可以在页面之间更改,所以没有办法只需为像素定义恒定宽度.

Answer 1

你可以这样做

<div id="wrapper">       <!-- wrapper will be in the middle of the page -->
   <div id="box1"></div> <!-- Your First Box -->
   <div id="box2"></div> <!-- Second Box -->
</div>

#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */