Html 如何保持浮动项目在容器中居中

好的，我已经启动了页面的预IM版本，但是我遇到了两个浮动div的问题，它们是wrap-in-header标签。基本上，我希望两个矩形位于包含div标记的中心。其中一个矩形与另一个重叠。我必须给我们定位，以便能够在容器内扩展它们，否则第二个容器会跳到第一个容器下面

这是我到目前为止得到的

     <div id="div1" class="fluid"> 
        <header id="headGraphics">
            <div id="headRectangle1">This will be an image.</div>
            <div id="headRectangle2">"This will be text adjusted using opacity."
     </div>

我无法删除位置标签，因为它们为我提供了我正试图完成的布局

如果你需要更多信息，请告诉妈妈。先谢谢你。是的，我已经搜索了这个页面和其他页面来寻找解决方案，但似乎没有一个适合我的特殊情况。

---

让我澄清一些事情。。。在我继续之前，我的98%选择器大部分都在锅炉板模板中。也就是说，这里是每个选择器的计算效果：

.gridContainer.clearfix头部图形； 宽度950px，边距0自动，字体系列单字重量800px大小20px，文本居中对齐。 .gridContainer.clearfix头部图形头枕角度1； 宽度350px，高度75px，显示内联块，边距rt&lft自动，相对位置，方框阴影无法正常工作 .gridContainer.clearfix头部图形头枕角度2

---

宽度350px，高度75px，显示内联块，相对位置，顶部50px，rt 0px，bot 0px，左100px这是为了使对象向上并从矩形偏移，向左浮动，清除两者，文本居中对齐。

我建议从两者中删除浮动属性，然后将两个项目都设置为内联块，您需要在这两种情况下都指定宽度和高度，然后将文本对齐中心应用于父对象，这样子对象才能居中于父对象可用区域

Display:inline块将使这两个元素的行为不只是像块元素一样，它将同时是block和inline，因此您将能够同时为这两个元素使用属性

如果你需要一个例子，我可以给你一个，只要让我知道

编辑

下面是一个工作示例

我的朋友

我的CSS

#headGraphics {
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    font-family: "monotype corsiva";
    font-size: 20px;
    font-weight: 800;
    width: 950px;
    text-align: center;
    outline: red dashed 1px;
    padding: 35px; /* remove or change if needed */
 }
#headGraphics [id*="headRectangle"] {
     width: 350px;
     height: 75px;
     position: relative;
     border: medium solid #000000;
     -webkit-box-shadow: 3px 3px 3px 1px #FF7878;
     box-shadow: 3px 3px 3px 1px #FF7878;
     display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px 25px;
    line-height: 75px; /* remove or change if you want to have more than one line of text */
 }

我的HTML

<header id="headGraphics">
    <div id="headRectangle1">This will be an image.</div>
    <div id="headRectangle2">"This will be text adjusted using opacity.</div>
</header>

---

您发布的css不会影响您发布的任何html，您能验证这是否是正确的css吗？但是，无论如何，如果您使用浮点属性，您不能居中任何内容必须设置显示：内联块；对于每一项。让我澄清一些事情…我已经尝试过简化。这些是计算出来的效果。我想感谢你的帮助。删除float属性后，我只需根据需要定位这两个项。在调整了一点之后，我把它们放在了我想要的位置。只要调整菜单导航栏，一切都会好起来。你确实帮了我的忙。像在Word中一样工作。哈哈，你确实漏掉了第二个矩形，但我的思路是对的。再次感谢。。。