Html 引导CSS样式问题

我有一小段引导代码，用于在

面板中设置
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知之甚少的情况下，我尝试使用垂直对齐来对齐元素，但无法使它们移动。我试着在按钮周围使用中心标签，但这些按钮也不会移动。我有一种感觉，
li
的样式正在覆盖我正在尝试的一些东西，这让我感到厌烦

有什么想法吗

下面是我正在尝试做的一个例子：


JS Fiddle:
对于您的问题，您只需将其添加到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;
}

要达到垂直中心对齐，请将
垂直中心添加到每个
列表组项目
，正如我在您的示例中看到的那样，您在第一个
li
处没有边框，但您甚至没有使用
li
@目的地它是一个链接
a
，它具有
列表组项目
类正在使用。好的，看看我的答案。在jsfiddle中工作良好这解决了一些问题，但是图标和按钮现在需要垂直对齐，而不仅仅是水平对齐。
.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;
}