Question

我想将一个自举面板置于col类中心，但面板不会水平和垂直居中。

这是所有代码

＆＃13;

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional, to align inner items 
                              horizontally inside the column */
}


.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
  flex-grow: 1;
}

.vertical-align > div:first-child {
  background-color: mediumaquamarine;
}

.vertical-align > div:last-child {
  background-color: gold;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vertical-align">
  <div class="col-xs-6 col-md-8">
    <div id="bs-1" class="carousel slide" data-ride="carousel" data-interval="5000">
      <ol class="carousel-indicators"></ol>

      <div class="carousel-inner">
        <div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>

        <div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>

        <div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
      </div>
      <a data-target="#bs-1" class="left carousel-control" role="button" data-slide="prev"></a>
      <a data-target="#bs-1" class="right carousel-control" role="button" data-slide="next"></a>
    </div>
  </div>

  <div class="col-xs-6 col-md-4" style="border:1px solid #555">
    <div class="panel panel-default">
      <div class="panel-body">
        <form name="form" method="post" action="connecter" novalidate="" class="form" id="form">
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group m-b-20">
                <label for="email">PIN</label> <input type="text" name="email_to" class="form-control" placeholder="PIN" />

                <p class="error-block"></p>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12"></div>
          </div>

          <div class="row buttons">
            <div class="col-xs-12 col-md-6">
              <input type="submit" class="btn-login btn btn-warning btn-flat btn-block m-b-20" value="Login now" />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

＆＃13;

我如何在这个DIV panel panel-default内的<div class="col-xs-6 col-md-4" style="border:1px solid #555">类中心使用horizentaly？

尝试vertical-align: middle;，但同样没有改变！

Answer 1

我向panel panel-default提供了此ID：id='change'，然后添加了此css：

#center {
  position: relative;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%); 
}

解决了这个问题。

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional, to align inner items 
                              horizontally inside the column */
}


.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
  flex-grow: 1;
}

.vertical-align > div:first-child {
  background-color: mediumaquamarine;
}

.vertical-align > div:last-child {
  background-color: gold;
}

#center {
  position: relative;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%); 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vertical-align">
  <div class="col-xs-6 col-md-8">
    <div id="bs-1" class="carousel slide" data-ride="carousel" data-interval="5000">
      <ol class="carousel-indicators"></ol>

      <div class="carousel-inner">
        <div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>

        <div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>

        <div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
      </div>
      <a data-target="#bs-1" class="left carousel-control" role="button" data-slide="prev"></a>
      <a data-target="#bs-1" class="right carousel-control" role="button" data-slide="next"></a>
    </div>
  </div>

  <div class="col-xs-6 col-md-4" style="border:1px solid #555">
    <div id='center' class="panel panel-default">
      <div class="panel-body">
        <form name="form" method="post" action="connecter" novalidate="" class="form" id="form">
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group m-b-20">
                <label for="email">PIN</label> <input type="text" name="email_to" class="form-control" placeholder="PIN" />

                <p class="error-block"></p>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12"></div>
          </div>

          <div class="row buttons">
            <div class="col-xs-12 col-md-6">
              <input type="submit" class="btn-login btn btn-warning btn-flat btn-block m-b-20" value="Login now" />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

将colst类中的引导面板居中

1 个答案: