html - 如何仅使用 css 使左侧菜单的内容居中？

Question

我有两个 div:

<div id="left_menu" >&nbsp;menu&nbsp;</div>
<div id="content" >&nbsp;centered&nbsp;</div>

目前他们有一个CSS

#content {
    margin-left:auto;
    margin-right:auto;
    display:table;
}

因此，这将创建一个带有菜单的 div，并在其下方创建一个居中的 div 并居中。我想要的是居中的 div#content 和 div#left_menu 在它的左边。我不想将两个 div 居中，只有 div#content。这应该只使用 div 和 css 来完成，并且应该适用于所有浏览器。

所以这可能看起来像

---> 菜单居中<--------

澄清一下:

我没有将文本居中/定位，重要的是 div(文本用于标记示例中的位置)。我希望两个 div 在同一行上(就像一个跨度，但我想使用 div)，居中的 div 应该在页面中间居中。菜单 div 应该紧挨着它，触及居中 div 的左边框。

此解决方案适用于所有屏幕尺寸(例如，如果屏幕非常大，则菜单和内容左右两侧的间隙应该非常大，例如，如果屏幕对于菜单和内容来说都太小)内容，应该没有间隙，结果应该看起来像(><代表截断)注意如果屏幕太小，菜单 div 首先完全显示，居中的 div 截断(就好像它只是两个 div向左浮动)。

>menu  cent<

由于提交的错误答案数量:

1) 请使用您的代码创建您自己的 .html 文件来验证您的答案

2) 全屏刷新一次，浏览器缩小一次刷新一次，这样浏览器就不能容纳两个 div(例如，居中的 div 是半截断的)

3) 使用 inspect element tool(chrome) 或等效工具来确保两个 div 接触，居中的 div 确实居中，等等

为了进一步阐明我想要什么，我提供了一个更好的示例(虽然不是解决方案):

这不适用于所有屏幕尺寸: http://jsfiddle.net/prt38/2/

Answer 1

根据评论中的请求更新。

我非常喜欢在垂直对齐元素时使用 vertical-align 属性。

HTML:

<div id="container">
    <span id="alignment"></span><div id="wrapper">
        <div id="sidebar">

        </div><div id="main">

        </div>
    </div>
</div>

注意结束语和后续语是多么的感人。对于要接触的内联和内联 block 元素，标记中它们之间不能有空格。

CSS:

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center; }
#container { white-space: nowrap; }
#wrapper { 
    white-space: nowrap;
    text-align: left;
    margin: 0 75px 0 0;
    vertical-align: middle;
    display: inline-block; }
#alignment { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
#sidebar {
    background: red;
    width: 75px;
    height: 200px;
    vertical-align: middle;
    display: inline-block; }
#main { 
    background: blue;
    width: 300px;
    height: 400px;
    vertical-align: middle;
    display: inline-block; }

预览:http://jsfiddle.net/Wexcode/2Xrcm/8/