Question

这包含主要父div中的我的徽标和导航栏。

徽标具有设定宽度，导航栏具有动态宽度。导航栏始终位于徽标右侧100px处。

目前它是完美的，除了它一直在屏幕左侧。我希望它在每个方面都是相同的，除了它位于屏幕的中心。

我已经看了这个并尝试了我在网上找到的不同方法，所有这些似乎都搞乱了我的布局。有任何想法吗？提前谢谢。

HTML

<div id="allHead">
    <div id="logo"></div>
    <div id="navigation"></div>
</div>

CSS

#allHead {

    position: relative;
}


#logo {

    width : 100px;
    height : 80px;
    background-color: green;
}


#navigation {

    position: absolute;
    max-width: 600px;
    left: 100px;
    top: 10px;
    right: 0px;
    height : 60px;
    background-color: orange;
}

Answer 1

居中一个未知宽度的区间

当div宽度可变时，下面的居中技术效果很好。它使用外包装和内包装。

外包装div设置为 text-align：center 。
内部包装器是内联块，并从外部包装器响应text-align：center。它使用 text-align：left 覆盖第一个包装器中的文本中心。
徽标和菜单是浮动的，因此它们会彼此相邻。

当宽度可变时，这是一种很好的居中技术。

在此示例中，导航将在较小的屏幕尺寸上包裹徽标。这在较小的屏幕上可能是有益的。

JSFiddle Example

#allHead {
    text-align:center;
}

.center-inner {
    text-align:left; 
    display:inline-block;
}

#logo {
    width : 100px;
    height : 80px;
    background-color: green;
    float:left;   
}

#navigation {
    max-width: 600px;
    background-color: orange;
    float:left;    
}

这是一个使用CSS表格显示将徽标和导航保持在一起的布局。由于这是您重要的主菜单，因此为css表和表行添加了div，以保证浏览器的稳定性。

JSFiddle

#allHead {
    text-align:center;
}

.center-inner {
    text-align:left; 
    display:inline-block;
}

.nav-bar-table {
    display:table;
}

.nav-bar-table-row {
    display:table-row;
}

#logo {
    width : 100px;
    height : 80px;
    background-color: green;
    display:table-cell;
}

#navigation {
    max-width: 600px;
    background-color: orange;
    display:table-cell;
    padding:.5em;    
}

最后，这里有JSFiddle来尝试使用类似于原始示例的绝对定位，并使用填充控制居中。我不会发布代码，因为绝对中心很接近但很难实现，最好的例子更好。

具有动态和设置宽度子div的中心父div

1 个答案: