ブートストラップCSSスタイルリングのトラブル

Question

私はpanelの中に私のli要素をスタイルするために働いているブートストラップコードの小さな部分を持っています。私は、アイコンを左に、右にあるボタンを縦方向と横方向の両方に集中させようとしています。それは自分自身のコンテンツで、私は垂直にセンタリングしたいと思っています。

<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/

Answer 1

をあなたの問題のためにあなたは、単にあなたの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