Question

我环顾四周并尝试了许多不同的解决方案，但它们都没有为我工作。基本上我只是想让我的<center>标签垂直对齐，所以在调整大小时，顶部的边距总是等于底部。我可以用什么样的CSS来做这件事？

＆＃13;

.modalText {
  font-weight: 100;
  font-size: 2.5em;
}

.paypalCenterModal {
  margin: auto 0;
}

.modalText {
  margin: auto 0;
}

.img-responsiveModal {
  margin: 30px 0px 30px 0px;
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 10px 10px 8px #888888;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 modal3ImgPrev">
      <img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
    </div>
    <center class="paypalCenterModal">
      <h3 class="modalText">Select Options</h3>
      <form class="paypalForm" <p>Form Content In Here</p>
      </form>
    </center>
  </div>
</div>

＆＃13;

Answer 1

您可以使用 Flexbox 轻松获得此功能。

如果您打算将引导程序升级到 version4 ，您可以轻松获得此功能。

根据doc，我发现你没有使用bootstrap网格col-*和row类。

阅读 Bootstrap3 Grid

Stack Snippet

＆＃13;

.v-align-section .row {
  display: flex;
  align-items: center;
}

.modalText {
  margin-top: 0;
}

@media (max-width:767px) {
  .v-align-section .row {
    flex-direction: column;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="v-align-section">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 modal3ImgPrev">
        <img class="img-responsiveModal img-responsive" id="myImg3" src='http://via.placeholder.com/250x350' />
      </div>
      <div class="col-sm-6">
        <form class="paypalForm">
          <h3 class="modalText">Select Options</h3>
          <p>Form Content In Here</p>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以在自己的课程中调整底部值。请尝试以下代码段。您还可以使用rem而不是pixel调整值，以提高响应速度。

.divThatNeedsToBeCenteredVertically {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 modal3ImgPrev">
      <img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
    </div>
    <center class="divThatNeedsToBeCenteredVertically">
      <h3 class="modalText">Select Options</h3>
      <form class="col-sm-6 paypalForm">
        <p>Form Content In Here</p>
      </form>
    </center>
  </div>
</div>

Answer 3

你为什么使用＆＃34; center＆＃34;标签？它已经过时了。（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center）

下面是解决方案，确保父类div的位置，类名＆＃34; row＆＃34;，不是＆＃34;静态＆＃34; （默认情况下，div的位置是静态的，您可以将其更改为＆＃34; relative＆＃34;或者其他）。

.row {
  position: relative;
  height: 100vh;
}

.divThatNeedsToBeCenteredVertically {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: gray;
}

有关详细信息，请查看网址：https://jsfiddle.net/sanqian/y9ftobma/

这是另一个例子，我建议你看看它。 https://jsfiddle.net/sanqian/La9m2u8L/

Answer 4

尝试添加此CSS代码段

  form{
  position : absolute;
  transform: translate(-50%,-50%);
  top : 50%;
  left : 50%;
  margin: auto;
}

我们正在设置表单屏幕的顶部和左侧中间

Answer 5

试试这个..！

.modalText {
    font-weight: 100;
    font-size: 2.5em;
    margin: auto 0;
}
.img-responsiveModal {
    max-width: 100%;
    height: auto;
    box-shadow: 10px 10px 8px #888888;
}
.row{
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row">
       	<div class="col-xs-6 modal3ImgPrev">
           <img class="img-responsiveModal" id="myImg3" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjM2ODEzMDUzMF5BMl5BanBnXkFtZTcwNDQ2NzU3OQ@@._V1_UY317_CR20,0,214,317_AL__QL50.jpg"/>
        </div>
        <div class="col-xs-6 paypalCenterModal">
           <h3 class="modalText">Select Options</h3>
           <form class="paypalForm"><p>Form Content In Here</p></form>
        </div>
        </div>
     </div>
</div>

如何垂直居中我的div

5 个答案: