将无序列表置于引导程序

Question

我目前正在尝试将无序列表集中在我的引导程序应用程序中。目前，我尝试使用flex的解决方案，但无法移动元素。该应用程序如下所示：

<div class="panel panel-primary">
   <div class="panel-body">
    <div class="container-fluid">
      <div id="keyboardJS">
       <%Call KeyBoardJS()%>
      </div>
    </div>  
   </div>
</div>

ASP函数KeyboardJS()只是一堆创建虚拟键盘的html代码，键盘以我想要的方式对齐，但是它周围的标记并没有给我正确的间距： / p>

我如何围绕键盘div进行居中？我试过了：

<style>
    #keyboardJS div {
      margin: 0 auto;
      width: 80%;
      text-align: center;
    }
</style>

甚至

<style>
 display: flex;
 align-items: center;
</style>

但两种解决方案都无效。指针将不胜感激。

Answer 1

您是否尝试过使用bootstrap网格来集中它。

<div class="row">
   <div class="col-sm-8 col-sm-offset-2"> 
      <%Call KeyBoardJS()%>
   </div>
</div>

Answer 2

如果<%Call KeyBoardJS()%>吐出一堆父代为#keyboardJS的html代码，那么使用flex将其居中的正确代码将是：

 #keyboardJS {
    display: flex;
    justify-content: center;
    align-items: center;
 }

尝试一下，或者更好地提供一个实例（小提琴，普兰克，钢笔等）。