對齊內容（縱連橫）列表中的組引導

圖片（兩個div，文本和文本）按鈕

我能夠唯一做的是拉按鈕的權利或底部的股利，但不居中，我怎麼能做到這一點？

我的代碼：

<div class="row"> 
    <div class="col-md-9 "> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h3> 
        h3. Lorem ipsum dolor sit amet. 
       </h3> 
      </div> 
     </div> 
     <div class="row list-group-item "> 

      <div class="col-md-3 text-center"> 
       <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle"> 
      </div> 
      <div class="col-md-5 "> 
       <div class="row"> 
        <div class="col-md-6 "> 
         <h3> 
          h3. Lorem ipsum dolor sit amet. 
         </h3> 
        </div> 
        <div class="col-md-6"> 
         <h3> 
          h3. Lorem ipsum dolor sit amet. 
         </h3> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-4"> 

       <button type="button" class="btn btn-success btn-lg pull-right"> 
        Default 
       </button> 
      </div> 

     </div> 
    </div>

這是我有：

這就是我想要的，但我不能夠實現：

我想要的按鈕也居中

來源

2016-02-13 Fernando Ramos

[引導4.中心垂直和水平對齊]的可能重複（https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment） – Rob

首先不需要使用這麼多的嵌套行和列，你應該嘗試使用較少的html元素來實現這個結果。其次將你的塊分成相等部分（使用col-md-3四次）。

<div class="row list-group-item "> 
    <div class="col-md-3 text-center vcenter"> 
     <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-circle"> 
    </div> 
    <div class="col-md-3 vcenter"> 
    <h3> 
     h3. Lorem ipsum dolor sit amet. 
    </h3> 
    </div> 
    <div class="col-md-3 vcenter"> 
    <h3> 
     h3. Lorem ipsum dolor sit amet. 
    </h3> 
    </div> 
    <div class="col-md-3 vcenter text-center"> 
     <button type="button" class="btn btn-success btn-lg"> 
      Default 
     </button> 
    </div> 
</div>

最後使用垂直對齊方式爲您的div：

.vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
    margin-left: -4px; 
}

你可以在這裏查看小提琴：https://jsfiddle.net/johannesMt/npgsnojf/3/ 它通過使用更少的HTML元素，這使得代碼更易讀achievs相同的結果。希望這可以幫助！

來源

2016-02-13 22:01:49 johannesMatevosyan

第一件事首先，你已經劃分了一些已經有100％寬度的部分。（通過在一行內使用兩個col-6）。這意味着他們已經儘可能地擴大了這一行。

您應該增加山坳數量

<div class="col-md-5 ">

同時減少按鈕欄

<div class="col-md-4">

最後，您可以設計結構以下列方式：

<div class="row"> 
    <div class="col-md-6 text-center"> 
     <div class="centered-block"> 
      <div>h3. Lorem ipsum dolor sit amet.</h3> 
     </div> 
    </div> 
    <div class="col-md-6 text-center"> 
     <div class="centered-block"> 
      <h3>h3. Lorem ipsum dolor sit amet.</h3> 
     </div> 
    </div> 
</div>

用以下css規則：

.centered-block { 
    display: inline-block; 
    position: relative; 
    width: 100px; /* you would like to have a fixed width */ 
} 

.centered-block > h3 { 
    position: absolute; 
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%); 
}

還沒有測試過，但應該可以。

來源

2016-02-13 21:50:40

對齊內容（縱連橫）列表中的組引導

回答

相關問題