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

如果你想让某些物体居中，也许最简单的方法就是采用以下设计：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 2

从我的理解中你想要的是位置＆＃34; .input-group ＆＃34; div to center，如果正确，你可以按如下方式进行。

<强> HTML

.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;
}

<强> CSS

Unable to cast COM object of type 'System.__ComObject' to interface type 'Microsoft.Office.Core.DocumentProperties'. This operation failed because the QueryInterface call on the COM component for the interface with IID '{2DF8D04D-5BFA-101B-BDE5-00AA0044DE52}' failed due to the following error: No such interface supported (Exception from HRESULT: 0x80004002 (E_NOINTERFACE)).

将绝对定位div的左右两边设置为0，并将其边距设置为自动。

我编辑了你的小提琴，here

Answer 3

试试这个CSS

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 4

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

在这里是代码，我将图像集中在一起而不是拉伸图像，以使其更加明显地工作：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何将div标签保持在背景图像的中心，并且应该是响应式的

4 个答案: