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

Question

我一直在尽最大努力使包含表单 .form-group 的 div 位于另一个 div #myCarousel 的中心，以响应垂直和水平方向。（适用于不同的设备宽度）

我已经尝试 absolute 使用像素、百分比进行定位 - 但那没有用。我尝试使表单成为 #myCarousel 中的子元素，但无法使其工作。

我的目标是使表单位于轮播的正中心（在图像滑块上方）并让图像在背景中滑动，而表单保持固定在中心。

这是我的代码的样子。 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

margin:0px auto or position :absolute;left:50%;top:50%;居中

Answer 2

将此添加到您的 form-group class。

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

Answer 3

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

首先你需要将 .form-group div 放在你的 #myCarouse div 中，然后使用 position: absolute 和 transform技巧你可以将它垂直和水平居中对齐

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 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 中（垂直和水平）

How to responsively center a form inside another div (vertically and horizontally)

html

css

forms

center

responsive