css - 小div中的超大div

Question

我需要制作一个如下所示的菜单:

上部条目的右边距(假设)为 20px。

问题出现了，当我添加子菜单时，尤其是带有 «large Menu-Entry» 的红色子菜单。顶级菜单需要保留在原位，所有子菜单都需要在该顶级菜单下居中。但是要么顶部条目被放大(这使得绿色部分向右移动)或者子条目没有位于顶部条目的中心......由于菜单项是动态的，我无法预测它们的宽度，因此我无法应用任何数学。

另外 - 如果用户在相应的页面上，则子条目仅可见(意味着 - 如果用户在红色页面上，绿色部分仅显示 «Menu1»)

我“可以”在页面加载后使用一些 javascript 来完成它，但我正在努力避免这种情况。

我尝试了各种方法，包括负边距等等 - 但似乎没有任何效果......有什么想法吗？

[编辑]

这里有一些 html - 试图疯狂地摸索但没有结果(除了来自 Brad 的那个，但那个不适用于 IE)

<div class="center">

            <div class="menu-container">
                <div class="menu-title">Title 1</div>
                <div class="menu-items">
                    Testomat<br />
                    Yo, this is a long text
                </div>
            </div>

            <div class="menu-container">
                <div class="menu-title">Title 1</div>
                <div class="menu-items">
                    Testomat<br />
                    Yo, this is a long text
                </div>
            </div>

        </div>

CSS:

.menu-container{
    width: 100px;
    float: left;
}

.menu-items, .menu-title{
    text-align: center;
}

Answer 1

如果您不关心 IE:您是否尝试过使用 display:table-cell？

你可以尝试这样的事情:

<div class="menu-container">
  <div class="menu-title">
      Menu1
  </div>
  <div class="menu-items">
      <div class="menu-item">large menu item</div>
      <div class="menu-item">sub</div>
      <div class="menu-item">sub</div>
  </div>
</div>

使用 CSS:

.menu-container {
   display : table;
   width: 100px;
}

.menu-title, .menu-items {
  display : table-cell;
  width: 100%;
  text-align: center;
}

table-cell 中的内容自然会换行到 100px。