Question

我一直在尽力将一个包含.form-group形式的div放在另一个div #myCarousel中，并在垂直和水平方向上进行响应。（适用于不同的设备宽度）

我尝试absolute定位像素，百分比 - 但这并没有奏效。我尝试在#myCarousel内部使表单成为子元素，但我无法使其工作。

我的目标是将表单放在caraousel的正中心（在图像滑块上）并使图像在背景中滑动，同时表单保持固定在中心。

这是我的代码的样子。的 Codepen Link

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
</div>
<div class="form-group">
  <form action="thank-you.php" method="post">
    <input class="form-control" type="text" name="name" placeholder="Enter your name">
    <input class="form-control" type="text" name="mobile" placeholder="Enter mobile number">
    <input class="form-control" type="text" name="email" placeholder="Enter your email address">
    <input class="form-control" type="text" name="address" placeholder="Enter your area and landmark">
    <select id="multi-select" name="products[]" multiple="multiple">
      <option value="product1">Product 1</option>
      <option value="product2">Product 2</option>
      <option value="product3">Product 3</option>
    </select>
    <input type="submit">
  </form>
</div>

如果你能在这里指导我，我会很高兴。

Answer 1

将此添加到您的form-group课程。

.form-group{
    max-width: 300px;
    margin: auto;
   }

Answer 2

#myCarousel {
  display: flex;
  justify-content: center;
  align-items: center;
}

在<div class="form-group">内坚持<div id="myCarousel">会使.form-group在#myCarousel内垂直和水平居中。

CSS Tricks has a good overview

Answer 3

首先，您需要将.form-group div放在#myCarouse div内，然后使用position: absolute和transform技巧，您可以将其垂直和水平对齐居中< / p>

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
  <div class="form-group">
    ...
  </div>
</div>

CSS

#myCarousel .form-group {
  width: 300px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px;
}

<强> Updated Codepen

Answer 4

保证金：0px auto或position：absolute; left：50％; top：50％;中心

Answer 5

您需要将.form-group放在#myCarousel中。

.form-group {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

Answer 6

在CSS中试试这个：

.slider-container {
  position: relative;
}
.form-group { # you should add and define css for custom class instead of overide Bootstrap class.
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
}

和HTML：

<div class="slider">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    .....
  </div>
  <div class="form-group">
    <form></form>
  </div>
</div>

如何响应地将表单居中于另一个div（垂直和水平）

6 个答案: