Question

我试图更改页面标题的自定义CSS，但每次我尝试向其中一个嵌套div添加顶部边距时，它会将整个背景图像向下移动。当前代码（删节）：

<header id="fancy-header" style="
       background-color: #ffffff; background-size: cover;   
       background-repeat: no-repeat; 
       background-image: url(http://thegsc.co.il/wp-content/uploads/2014/07/about-header.jpg); 
       background-position: center center; min-height: 150px">
    <div class="wf-wrap">
        <div class="wf-table" style="
             background:rgba(32,117,200, .6) !important; 
             margin-top:25px;">
           <div class="title">title</div><div class="breadcrumbs">breadcrumbs</div>
       </div>
    </div>
</header>

理想情况下，我尝试做的就是拥有一个跨越整个标题（150px）的背景图像，然后是背景文本上的透明色叠加层。使用margin-top:25px，因为当我尝试将vertical-align：middle添加到.wf表时，没有任何反应。

建议？

Answer 1

麻烦的是你的.wf-table元素不尊重#fancy-header作为其父元素。诀窍是添加float: left，并且在这种情况下它会像您期望的那样表现。请在此处查看 - https://jsfiddle.net/96hf0nqa/

浮点数有点棘手但对于有效的CSS非常重要。你可以阅读很多关于他们here的内容。祝你好运！

Answer 2

如果您的<header>是全屏的主要容器，那么理想情况下您应该使用网格方法。

不确定您是否使用网格？在这种情况下，wf-wrap是您的网格行：

.wf-wrap {
    box-sizing: border-box; /* box model fix */
    max-width: 94rem; /* 960px - gutter */
    padding: 0 1rem; /* grid gutter */
    margin: 0 auto; /* to center */
    height: 100%;
    position: relative; /* to init the absolute offset of it's children */
}

然后你的wf-table应该被置于绝对位置以完全控制：

.wf-table {
    position: absolute; /* to control top left right bottom */
    top: 2.5rem; /* default offset */
    z-index: 1 /* if overlap requires it */;
}

<强> DEMO

通常，网格行分为列。实际上，职位相对属于一个列。

.column {
    box-sizing: border-box;
    padding: 0 1rem;
    float: left;
    height: 100%;
    position: relative;
}

.g50 { max-width: 50%; width: 100%; }

因此，可以使您的HTML更加通用，以控制列内元素的位置。

<div class="header">
    <div class="row">
        <div class="column g50">
            <div class="wf-table"><!--content here--></div>
        </div>
        <div class="column g50"></div>
    </div>
</div>

<强> DEMO

此外，有一种方法可以在CSS3中垂直对齐块元素：

.middle-y {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Css帮助 - 背景图像和边距

2 个答案: