如何将div标签保持在背景图片的中央，并且应该响应

Question

如何将该div放在背景图片的中央？

 .imagesearch { background-image: url("http://placehold.it/500x150"); background-repeat: no-repeat; margin-top: 50px; height: 500px; background-size: 100%; } .input-group { position: absolute; } .title { margin-top: 10px; height: 30px; width: 100%; } .search { margin-top: 20px; } 

 <div class="imagesearch col-md-12"> <div class="input-group "> <input type="text" class="form-control" placeholder="Keyword" aria-describedby="sizing-addon2"> <select name="title" class="title"> <option value="" selected disabled>Location:</option> <option value="animals">Pune</option> <option value="birds">Mumbai</option> <option value="plants">Delhi</option> </select> <br> <button class="search">SEARCH</button> </div> </div> 

Answer 1

如果您想使某些对象居中，则最简单的方法可能是以下设计：

 html, body { height: 100%; margin: 0; } div.parent{ position:relative; width:100%; height:100%; background-color:blue; } div.parent div.child{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; width:100px; height:100px; background-color: yellow; } 

 <div class="parent"> <div class="child"></div> </div> 

请记住，子元素必须具有宽度和高度。

Answer 2

据我了解，您想要的是将“ .input-group ” div居中放置 ，如果正确，则可以按照以下步骤进行操作。

HTML

<div class="imagesearch col-md-12">
    <div class="input-group ">
        <input type="text" class="form-control" placeholder="Keyword" aria-describedby="sizing-addon2">
        <!-- </div> -->
        <!-- dropdown on image -->
        <!-- <div class="dropdown"> -->
        <select name="title" class="title">
            <option value="" selected disabled>Location:</option>
            <option value="animals">Pune</option>
            <option value="birds">Mumbai</option>
            <option value="plants">Delhi</option>
        </select>
        </br>
        <!-- </div> -->
        <button class="search">SEARCH</button>
    </div>
</div>

CSS

.imagesearch {
    background-image:url("slide.jpg");
    background-repeat: no-repeat;
    margin-top: 50px;
    height: 500px;
    background-size: 100%;
}
.input-group {
    position: absolute;
    margin:auto;
    left:0;
    right:0;
}
.title {
    margin-top: 10px;
    height:30px;
    width: 100%;
}
.search {
    margin-top: 20px;
}

只需将绝对位置div的左右设置为0，并将其边距设置为auto。

我已经编辑了你的小提琴，就在这里

Answer 3

试试这个CSS

 html, body { height: 100%; margin: 0; } .imagesearch { background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQGaONLkZH9xSY96QkElKMO0vduB0fw_JaPoLLh0km5Ooe8ulo"); background-repeat: no-repeat; margin-top: 50px; height: 100%; background-size: cover; position: relative; } .imagesearch .input-group { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 400px; height: 100px } .title { margin-top: 10px; height: 30px; width: 100%; } .search { margin-top: 20px; } @media all and (max-width: 768px) { .imagesearch { background-size: 100%; height: 33%; } div.imagesearch div.input-group{ width: 100%; } .dropdown { padding-bottom: 20px; padding: 1em 0 0; } .search { width: 50%; margin-top: 10px; } } 

 <div class="imagesearch col-md-12"> <div class="input-group "> <input type="text" class="form-control" placeholder="Keyword" aria-describedby="sizing-addon2"> <select name="title" class="title"> <option value="" selected disabled>Location:</option> <option value="animals">Pune</option> <option value="birds">Mumbai</option> <option value="plants">Delhi</option> </select> <br> <button class="search">SEARCH</button> </div> </div> 

Answer 4

要使内容在水平和垂直方向上居中，最好的方法是使用表格格式并使用vertical-align:middle; 和text-align:center; 。 然后，您只需将希望所有内容集中的元素设置为display:table-cell ，然后将其包装在设置为display:table的元素display:table 。

这是代码，我将图像居中而不是拉伸图像以使其更明显地起作用：

 .table-container { display:table; width:100%; height: 500px; } .imagesearch { background-image: url("http://placehold.it/450x450"); background-repeat: no-repeat; background-position: center; margin-top: 50px; display: table-cell; text-align: center; width: 100%; height: 100%; vertical-align: middle; } .title { margin-top: 10px; height: 30px; width: 100%; } .search { margin-top: 20px; } 

 <div class="table-container"> <div class="imagesearch col-md-12"> <div class="input-group "> <input type="text" class="form-control" placeholder="Keyword" aria-describedby="sizing-addon2"> <select name="title" class="title"> <option value="" selected disabled>Location:</option> <option value="animals">Pune</option> <option value="birds">Mumbai</option> <option value="plants">Delhi</option> </select> <br> <button class="search">SEARCH</button> </div> </div> </div>