中心垂直幾個引導柱

-1

這裏是代碼coresponding這樣：

HTML：

<div class="row"> 
<div class="formulaire-rdv"> 
    <div class="col-xs-12 nopadding" style="margin-top:auto;"> 
     <div style="display:flex;"> 
      <h2 class="slide-title-dark"> 
       Prise de Rendez-vous 
      </h2> 
     </div> 
    </div> 
    <div class="col-xs-12 nopadding" style="margin-top:100px;"> 
     <div class="col-sm-4 col-xs-12 col-sm-offset-1"> 
      <form id="form-rdv"> 
       <div class="form-group"> 
        <label for="exampleInputEmail1">Nom, Prénom:</label> 
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Votre nom, prénom"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1">Nom de société:</label> 
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Le nom de votre société"> 
       </div> 
       <div class="form-group"> 
        <label for="datetimepicker4">Date:</label> 
        <input type='text' class="form-control" id='datetimepicker4' placeholder="Sélectionnez une date" /> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1">Message:</label> 
        <textarea class="form-control" rows="4" placeholder="Votre Message"></textarea> 
       </div> 
       <button type="submit" class="btn btn-default">Envoyer</button> 
      </form> 
     </div> 
     <div class="col-sm-5 col-sm-offset-1"> 
      <div class="Flexible-container"> 
       <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.090588107181!2d2.2261348518741295!3d48.87554960734967!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e664de82918609%3A0x12912c17a8dd9551!2s83+Rue+Carnot%2C+92150+Suresnes%2C+France!5e0!3m2!1sfr!2sch!4v1464688931681" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
      </div> 
     </div> 
    </div> 
    <div class="col-xs-8 col-xs-offset-2" style="margin-top:50px; text-align:center; margin-bottom:auto;"> 
     <p class="p-rdv">L’ajout, la modification ou le remplacement de biens dans la vitrine ne prend que quelques secondes grâce à l’outil d’administration</p> 
    </div> 

</div>

CSS：

.form-group{ 
    margin-bottom: 70px !important; 
} 

/* Flexible iFrame */ 

.Flexible-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.Flexible-container iframe, 
.Flexible-container object, 
.Flexible-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.p-rdv{ 
    margin-right: auto; 
    margin-left: auto; 
    font-family: $theme-font-light; 
    font-size: 30px; 
}

我想整個塊都是垂直居中，我試着在第一個col-12上創建一個margin-top auto和在最後一個margin-bottom：auto但它不工作......任何創意？

來源

2016-05-31 Baptiste Arnaud

您的問題不明確。你需要設置左和右div內容高度相同..？ – user2584538

看看這個：[垂直居中]（https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/）。我會在家看看細節。 –

<div class="col-xs-12 nopadding verticleCenter"> 
      <div style="display:flex;"> 
       <h2 class="slide-title-dark"> 
        Prise de Rendez-vous 
       </h2> 
      </div> 
     </div> 


.verticleCenter{height:50px;line-height:50px;}

的margin-top：汽車不工作，如果你有，以顯示中心給予行高相同的高度，所以這句話被垂直對齊中心

來源

2016-05-31 10:47:51 3bu1

它與邊緣頂點固定像素有何不同？ –

你必須給出指定的高度，以便讓邊緣頂部的自動/線條高度工作以使其居中。 – 3bu1

中心垂直幾個引導柱

回答

相關問題