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造型问题

回答

相关问题