Question

我正在尝试创建一个单页网站。我们的想法是为每个图像设置一个div（使用bootstrap）。这将为div创建背景图像。然后我想在我可以放置文本和其他图像的位置放置另一个div。我设法使用顶部的位置让它工作，但我想使用相对于div的尺寸，以便当它显示在较小的屏幕中心div中的内容仍然是中心并设置为适当的大小。

这是div：

<div class="row" id="homeRow">
    <img id="homeImage" src="imageSource" alt="Example">
    <div class="col-md-8 col-md-offset-2" id="homeTitle">
        <img src="headingSource" alt="Handwriting Fonts">
        <h3>Some content</h3>
    </div>
</div>

页面上有三个。我的css目前看起来像这样：

#homeRow{
height: 800px;
width: 100%;
color: white;
overflow:hidden;
}

#homeImage{
width: 100%;
position: relative;
-webkit-filter:brightness(60%);
-moz-filter:brightness(60%);
filter: url(#brightness);
filter:brightness(60%);
}

#homeTitle{
position: absolute;
top: 300px;
width: 50%;
font-family: Verdana, Geneva, sans-serif;
}

所以我正在寻找一个解决方案，在那里我可以将行div中的所有内容相对于行div放置。

Answer 1

#homeRow{
height: 800px;
width: 100%;
color: white;
overflow:hidden;
position: relative;
}

#homeImage{
width: 100%;
position: relative;
-webkit-filter:brightness(60%);
-moz-filter:brightness(60%);
filter: url(#brightness);
filter:brightness(60%);
}

#homeTitle{
position: absolute;
top: 50%;
width: 50%;
left: 50%;
font-family: Verdana, Geneva, sans-serif;
}

尝试使用此CSS。您可以使用位置相对于外部div和内部位置绝对。

Answer 2

#homerow{
    ...
    position: relative; // add this
}
#homeTitle{
    ...
    //width:50% - remove this
    left:25%; // add this
    right:25%; // add this
    // those left and right will make width 50% and centered
}

示例：https://jsbin.com/savaqoputo/edit?html,output

将div放在另一个div和图像中

2 个答案: