【问题标题】: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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多