html - Bootstrap CSS 样式问题

Question

我有一小段 Bootstrap 代码，我正在使用它来设置 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 fiddle :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