Bootstrap CSS Проблемы с дизайном

Question

У меня есть небольшой кусок кода начальной загрузки. Я работаю над тем, чтобы стилизовать мои li элементов внутри panel. Я пытаюсь получить значок слева, а кнопки справа - по вертикали и по горизонтали. Я бы хотел, чтобы его содержимое было сосредоточено вертикально.

<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