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

【问题标题】：3 div's nested in div centered but acting as if margin or padding when none3 个 div 嵌套在 div 居中，但在没有时充当边距或填充
【发布时间】：2012-11-05 20:05:12
【问题描述】：

我有三个 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？

【问题讨论】：

标签： css center html

【解决方案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/

【讨论】：