中心在列内部证明了这一点

Question

我知道很多关于将<ul>元素集中在Bootstrap列中的问题，但我想要的是将<ul>置于中心但不要将文本居中（我希望每个{{ 1}}垂直对齐）。

这是我的代码：

<li>

我的css：

<div class="content-menu">
  <h1 class="content-header">Information</h1>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ul class="content-menu-menu">
        <li> <a href="#" class="link"><img src="images/info.png">Information</a></li>
        <li> <a href="#" class="link"><img src="images/dollar.png">Pricing</a></li>
        <li> <a href="#" class="link"><img src="images/more.png">Supplements</a></li>
        <li> <a href="#" class="link"><img src="images/placeholder.png">Map</a></li>
      </ul>
    </div>
  </div>

但这是我得到的：

我想要的是列表位于屏幕的中央，但每个项目都是左对齐的。

任何帮助将不胜感激！

Answer 1

请参阅下文。内容菜单（中心）和内容菜单菜单＆gt;李（左）调整。

＆＃13;

＆＃13;

.content-menu {
text-align: center;
}

.content-menu-menu {
  float: none;
  padding:0;
  display: inline-block;
}

.content-menu-menu > li {
  color:white;
  padding-top: 10px;
  text-align: left;
}

.content-menu-menu > li > a > img {
  width: 32px;
  height:32px;
  margin-right: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-menu">
  <h1 class="content-header">Information</h1>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ul class="content-menu-menu">
        <li> <a href="#" class="link"><img src="images/info.png">Information</a></li>
        <li> <a href="#" class="link"><img src="images/dollar.png">Pricing</a></li>
        <li> <a href="#" class="link"><img src="images/more.png">Supplements</a></li>
        <li> <a href="#" class="link"><img src="images/placeholder.png">Map</a></li>
      </ul>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;