css - 3 个 div 嵌套在 div 居中，但在没有时充当边距或填充

Question

我有三个 div 嵌套在另一个 div 中。这三个 div 具有 css display:inline:block ，因此它们就像浮动一样，但每个 div 之间有一个间隙，就好像它们上有边距或填充一样。

这是HTML：

    <div id="lowerContentHeaderContainer">
      <div id="borderLowerContentL"></div><!-- borderLowerContentL -->
      <div id="textLowerContentM">some title goes here</div><!-- textLowerContent -->
      <div id="borderLowerContentR"></div><!-- borderLowerContentR -->
    </div><!-- lowerContentHeaderContainer -->

这是CSS：

#lowerContentHeaderContainer {
position:relative;
width:746px;
text-align:center;
}
#borderLowerContentL {
position:relative;
display:inline-block;
width:6px;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_01.png);
background-repeat:no-repeat;
border:1px solid #000;
}
#textLowerContentM {
position:relative;
display:inline-block;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_02.png);
background-repeat:repeat-x;
border:1px solid #000;
}
#borderLowerContentR {
position:relative;
display:inline-block;
width:6px;
height:39px;
background-image:url(img/SideBar_MiddleTitle_Area_04.png);
background-repeat:no-repeat;
border:1px solid #000;
}

在嵌套的 div 周围添加了边框，因此您可以看到我在说什么。此外，中心 div 没有像应有的那样水平对齐。

任何想法如何摆脱 div 之间的空间并正确对齐中心 div？

Answer 1

浏览器会将换行符视为空格，除非它们是浮动的。

html

<div id="lowerContentHeaderContainer"><div id="borderLowerContentL">&nbsp;</div><div id="textLowerContentM">some title goes here</div><div id="borderLowerContentR">&nbsp;</div></div>​

http://jsfiddle.net/kudoslabs/CTpYH/