各种div的对齐

Question

我正在设计this layout - 请参阅第二张照片的整体布局。

• A是20px高，必须占据屏幕的整个宽度。
• B是100px高，也必须占据屏幕的整个宽度。
• C宽度为200px，必须占据屏幕的整个高度，除A + B以外的高度为120px。
• D没有限制，并适应窗口大小调整。

要详细说明我目前面临的问题，请看第1张图片。

• 如何确保B3的中心始终与div A中文本的中心对齐？ B1-B4是我在B格里的4个不同元素。 B1，B2和B4应该保持在同一个地方。唯一的“流体”部分是B3的右/左边距变化，以保持中心对齐。

我现在的代码可以在this JSFiddle找到。

的index.html：

<div id="A">A</div> 
<header> 
    <!-- Header is B in the diagram --> 
    <div id="B1">B1</div> 
    <div id="B2">B2</div> 
    <div id="B3">B3</div> 
    <div id="B4">B4</div> 
</header> 
<div id="C">C</div> 
<div id="D">D</div> 

的style.css：

html, body { 
    width: 100%; 
    height: 100%; 
} 

#A{ 
    width:   100vw; 
    height:  20px; 
    background: black; 
    color: white; 
    text-align: center; 
} 

header { 
    height: 100px; 
    width: 100%; 
    background: #494949; 
    color: white; 
} 

#B1 { 
    width: 100px; 
    height: 100px; 
    margin-left: 5px; 
    margin-right: 47px; 
    float: left; 
} 

#B2 { 
    float: left; 
    margin-right: 60px; 
} 

#B3 { 
    float: left; 
    height: 75px; 
    width: 580px; 
    margin-top: 12.5px; 
    text-align: center; 
} 

#B4 { 
    float: right; 
} 

#C { 
    height: 100%; 
    width: 200px; 
    float: left; 
    position: fixed; 
} 

#D { 
    background-color: #000000; 
    float: left; 
    margin-left: 200px; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    color: white; 
} 

我有我的意思在评论的视频。另外，我想指出，我实际上并不是用字母命名div，只是为了这个例子。

感谢您的任何帮助。

Answer 1

如果要B3将其对齐到A的中心，则不能在B1和B2上使用float: left，因为它会将B3的中心移动到右侧。我发现对于现在的唯一方法是在B1，B2和B4使用白金定位：

header { 
    height: 100px; 
    background: #494949; 
    color: white; 
    position: relative; 
} 

#B1, #B2, #B4 { 
    width: 100px; 
    height: 100px; 
} 

#B1 { 
    position: absolute; 
    top: 0px; 
    left: 5px; 
} 

#B2 { 
    position: absolute; 
    top: 0px; 
    left: 150px; 
} 

#B3 { 
    text-align: center; 
} 

#B4 { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
} 

See demo here（与其它附加彩色可视化）。

但要小心，我的B3上的文字很大，它会在B1，B2或B4下。为了避免这种情况，您可以在B3的左侧和右侧添加填充。但是它必须是两侧相同的值，否则B3的中心将不会与A的中心对齐。

我继续寻找没有绝对定位解决方案（东阳我不喜欢它）...