中间和左侧之间的中心 div答案

【问题标题】：Center div between middle and left中间和左侧之间的中心 div
【发布时间】：2015-03-16 08:30:30
【问题描述】：

我的徽标在中心对齐，当我调整屏幕/窗口宽度时，它完美地保持在中心。在徽标的左侧，我有一个只有两个单词的小菜单，我希望此菜单/div 始终位于徽标和左边缘之间。

这可以只用 CSS 完成吗？

要考虑的是徽标有自己的宽度200px，但我可以用margin-left: -100px; 解决这个问题。当它缩小到不再适合左侧的屏幕尺寸时！我会将它放在带有@media screen and (max-width: px) { ... } 的徽标下方。

像这样：http://postimg.org/image/v148gyc9b/

【问题讨论】：

标签： html css alignment center

【解决方案1】：

如果徽标的固定大小为 200 像素，您可以尝试这样的操作：

#menu {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 100px);
}

【讨论】：

是的。我只需要菜单的 width: calc(50% - 100px) ，我可以删除 margin-left: -100px;我有标志！我会对此进行一些测试，但看起来它应该可以工作！关于浏览器支持计算的任何想法？谢谢！

【解决方案2】：

假设你有这个 html：

<div class="header">
    <div class="menuContainer">
        <div class="menu">
            Menu
            <!-- Your Menu here -->
        </div>
    </div>
    <div class="logo">Logo</div>
</div>

您的徽标具有静态宽度，您不希望它是百分比宽度，因此您可以使用此 css 使 .menu 占据徽标和左边缘之间的位置：

.menuContainer {
    width: 50%;
    padding: 0 50px; /* 50 is (logoWidth/4) */
    margin-left: -50px; /* 50 is (logoWidth/4) */
    margin-right: -50px; /* 50 is (logoWidth/4) */
    box-sizing: border-box;
    position: relative;
    float: left;
}

当您使用媒体查询更改徽标的宽度时，不要忘记更改“50px”。

这是 JSFiddls 的一个工作示例： http://jsfiddle.net/3047kfkn/

【讨论】：