Question

当我试图将一些李集中在ul里面时，我遇到了问题
所以这是我的代码：

＆＃13;

<div>
    <ul>
        <li><a href="#"><img src="images/categories-6.png" alt="Books"/></a></li>
        <li><a href="#"><img src="images/categories-7.png" alt="Learn"/></a></li>
        <li><a href="#"><img src="images/categories-8.png" alt="Ball"/></a></li>			
    </ul>
</div>

＆＃13;

结果是

那么，我怎样才能让这个3 pic的位置成为中心？

Answer 1

尝试这样的事情

＆＃13;

ul {
   text-align:center;
   padding:0;
}
ul li {
   display:inline-block;
   list-style:none;
   width:100px;
}
ul li img {
   width:100%;
}

＆＃13;

<div>
  <ul>
    <li> <a href="#"><img src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="Books"/></a> </li>
    <li> <a href="#"><img src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="Learn"/></a> </li>
    <li> <a href="#"><img src="https://pbs.twimg.com/profile_images/655066410087940096/QSUlrrlm.png" alt="Ball"/></a> </li>
  </ul>
</div>

＆＃13;

Answer 2

div{
  text-align:center;
  display:flex;
  margin: 0 auto;
}

div ul{
   margin: auto;
}

div  li{
 
  list-style-type:none;
  display:inline;
}

li img{
  width:60px;
  height:60px;
}

<div><ul>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Books" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Learn" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Ball" /></a>
  </li>         

</ul></div>

这是JSFiddle

希望这有帮助。

Answer 3

这就是你需要的。使用text-align:center

＆＃13;

ul{
  text-align:center;
}
li{
  list-style:none;
  display:inline;
}

img{
  height:50px;
  width:50px;
  }

＆＃13;

<div><ul>

  <li>
   <a href="#"><img src="http://www.pd4pic.com/images/list-checkbox-checked-tick-note-office-choice.png" alt="Books"/></a>
  </li>

  <li>
   <a href="#"><img src="http://www.pd4pic.com/images/list-checkbox-checked-tick-note-office-choice.png" alt="Learn"/></a>
  </li>

  <li>
   <a href="#"><img src="http://www.pd4pic.com/images/list-checkbox-checked-tick-note-office-choice.png" alt="Ball"/></a>
  </li>         

</ul></div>

＆＃13;

Answer 4

您可以使用flex CSS布局来实现这一目的

ul {
  list-style: none;
  display: flex;
  justify-content: space-around;

  /* The below is just to pretty-up the snippet example */
  width: 50%;
  padding: 10px;
  margin: auto;
  background-color: #eee;
}

<ul>
  <li><a href="#"><img src="http://lorempicsum.com/futurama/50/50/1" alt="Books" /></a></li>
  <li><a href="#"><img src="http://lorempicsum.com/futurama/50/50/2" alt="Learn" /></a></li>
  <li><a href="#"><img src="http://lorempicsum.com/futurama/50/50/3" alt="Ball" /></a></li>
</ul>

Answer 5

文字对齐就够了。但如果您需要更多调整，请使用bootstrap网格，或者如果需要，还可以与边距对齐。

   h4 {text-align:center;}
    ul {
       text-align:center;
       margin-left:-8%;
    }
    ul li {
       display:inline-block;
       list-style:none;
    }
    img{
      height:100px;
      width:100px;
      padding:1em;
      }

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Case</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <style>
 
    </style>
    <body>

         
     
    <div class="container">
      <div class="well">
      <h4>Categories</h3>
      <ul>

      <li>
       <a href="#"><img src="http://lorempixel.com/400/200/sports/1/"></a>
      </li>

      <li>
       <a href="#"><img src="http://lorempixel.com/400/200/sports/2/"></a>
      </li>

      <li>
       <a href="#"><img src="http://lorempixel.com/400/200/sports/3/"></a>
      </li>         

    </ul>
    </div>
    </div>

    </body>
    </html>

Answer 6

试试这个。

ul{
  list-style-type: none;
  padding: 0;
  text-align: center;
}
li{
  display: inline-block;
  margin: 0 50px;
}

Answer 7

停止复杂的事情，你不需要额外的div来做到这一点

设置ul padding 0以摆脱UL的基本元素，并开始在ul标签中使用flex。

justify-content表示水平对齐flex项目（child / li），另一侧是align-items表示垂直对齐flex项目（child / li）。也许这段代码可以帮到你。

＆＃13;

ul{
background:#ccc;
padding:0;
width:100%;
height:100%;

  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}

li{
  list-style-type:none;
  margin:5px;
}

li img{
  width:60px;
  height:60px;
}

＆＃13;

<ul>
  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Books" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Learn" /></a>
  </li>

  <li>
   <a href="#"><img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" alt="Ball" /></a>
  </li>         
</ul>

＆＃13;

Answer 8

非常容易，使用flexbox：

ul {
  display: flex;
  justify-content: center;
}

根据caniuse-使用flexbox是安全的。另外，不要忘记flexbox前缀。

将一些<li>置于<ul>内

8 个答案: