Bootstrap CSS造型問題

我有一小段自舉代碼，用於在panel中設置我的li元素的樣式。我試圖讓左邊的圖標和右邊的按鈕垂直和水平居中。它的自我內容我想垂直居中。Bootstrap CSS造型問題

<div class="panel panel-primary"> 
    <div class="panel-heading"><i class="fa fa-cubes"></i>&nbsp;&nbsp;Modules</div> 
    <br /> 
    <div class="list-group"> 
    <a class="list-group-item"> 
     <div class="media col-md-3"> 
      <figure class=""> 
       <center><i aria-hidden="true" class="fa fa-cog fa-6"></i></center> 
      </figure> 
     </div> 
     <div class="col-md-6"> 
      <h4 class="list-group-item-heading"> Module Title </h4> 
      <p class="list-group-item-text"> Qui diam libris ei, vidisse incorrupte at mel. His euismod salutandi dissentiunt eu. Habeo offendit ea mea. Nostro blandit sea ea, viris timeam molestiae an has. At nisl platonem eum. 
       Vel et nonumy gubergren, ad has tota facilis probatus. Ea legere legimus tibique cum, sale tantas vim ea, eu vivendo expetendis vim. Voluptua vituperatoribus et mel, ius no elitr deserunt mediocrem. Mea facilisi torquatos ad. 
      </p> 
     </div> 
     <div class="col-md-3"> 
      <div class="input-group"> 
       <div id="radioBtn" class="btn-group"> 
       <center> 
        <button class="btn btn-primary btn-sm active" data-toggle="happy" data-title="Y">YES</button> 
        <button class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="N">NO</button> 
       </center> 
       </div> 
       <input type="hidden" name="happy" id="happy"> 
      </div> 
     </div> 
    </a> 
    </div>

CSS：

a.list-group-item { 
    height:175px;; 
    min-height:175px; 
} 
a.list-group-item.active small { 
    color:#fff; 
} 
.fa-6{ 
    font-size: 60px; 
    vertical-align: middle; 
} 
#radioBtn .notActive{ 
    color: #3276b1; 
    background-color: #fff; 
}

我曾嘗試：用我的CSS的小知識，我試圖使用對齊垂直對齊的元素，不能讓他們繼續前進。我試着在按鈕周圍使用中心標籤，那些標籤也不會移動。我有一種感覺，li造型覆蓋了我正在嘗試的一些東西，並把它扔掉。

有什麼想法？

這裏是什麼，我試圖做一個例子：

JS小提琴：https://jsfiddle.net/p7td4sbz/

來源

2016-07-08 SBB

正如我在你的例子中可以看到的，你不會在第一個'li'邊界不會使用邊界，但你甚至不使用'li' – DestinatioN

@DestinatioN它的鏈接'a'具有a它正在使用的'list-group-item'。 – SBB

好的，看看我的答案。在jsfiddle中工作得很好 – DestinatioN

你的問題，你可以簡單地添加到您的CSS

.input-group{ 
    width:100%; 
    text-align:center; 
} 
.list-group-item:first-child{ 
    border-width: 0px 0px !important; 
} 

.vertical-center { 
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */ 
    min-height: 100vh; /* These two lines are counted as one :-)  */ 
    display: flex; 
    align-items: center; 
}

要達到垂直中心對齊，請將vertical-center添加到每個list-group-item

來源

2016-07-08 05:46:19 DestinatioN

這解決了一些問題，但現在圖標和按鈕需要垂直對齊，而不僅僅是水平對齊。 – SBB

@SBB更新了我的答案 – DestinatioN

perfecto！謝謝！ – SBB

Bootstrap CSS造型問題

回答

相關問題