在引導程序中將無序列表置於容器流體中

我目前正在嘗試將我的引導程序應用程序中的無序列表居中。目前，我嘗試了使用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代碼，創建了一個虛擬的鍵盤，該鍵盤是我希望它的方式排列，但它周圍的標記不給我正確的間距：

我怎麼會去中心鍵盤DIV？我曾嘗試：

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

即使

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

但無論是解決方案的工作。指針將不勝感激。

來源

2017-08-29 sigillum_conf

您是否嘗試過使用引導網格來居中對齊。

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

來源

2017-08-29 18:14:25 Laiman

我已經嘗試過了，但它破壞了鍵盤的外觀，我嘗試的做法是給容器流體添加一個內嵌樣式並填充左側並設置一個值，該方法有效，但它會消除響應性在屏幕大小方面。 –

好的，如果你添加的內聯樣式工作，然後添加響應CSS來調整不同的屏幕尺寸。 – Laiman

如果<%Call KeyBoardJS()%>吐出一串HTML代碼，其父母爲#keyboardJS，那麼正確的代碼使用Flex居中這將是：

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

給它一個嘗試，甚至更好的提供現場示例（Fiddle，Plunker，Pen等）。

來源

2017-08-29 20:37:42

在引導程序中將無序列表置於容器流體中

回答

相關問題