如何在 <ul> 中集中元素？答案

【问题标题】：How to centralize elements inside an <ul>?如何在 <ul> 中集中元素？
【发布时间】：2018-01-29 01:20:55
【问题描述】：

嗯，我有一个网站，但它正在发生一些我无法解决的问题。我有这样的代码：

aside {
   font-size: 150%;
   font-family: fantasy;
   font-variant: small-caps;
   line-height: 2em;
   background: rgba(187,219,136,0.75);
   width: 90%;
   height: 50px;
   text-align: center;
}

aside {
   margin: auto;
   margin-top: 20px;
}

aside li {
   float: left;
   padding: 0 2%;
   font-size: 100%;
}

<aside>
      <ul>
        <li id="matematica"><a href="matematica.html" title="Ver resumos de Matemática">Matemática</a></li>
        <li><a href="geografia.html" title="Ver resumos de Geografia">Geografia</a></li>
        <li><a href="fisica.html" title="Ver resumos de Física">Física</a></li>
        <li><a href="historia.html" title="Ver resumos de História">História</a></li>
        <li><a href="portugues.html" title="Ver resumos de Português">Português</a></li>
        <li id="quimica"><a href="quimica.html" title="Ver resumos de Química">Química</a></li>
      </ul>
</aside>

所以，问题是我想把 li 元素集中在 ul 里面，而我不能使用 text align 因为 li 不是文本！谁能帮帮我？

【问题讨论】：

删除li上的浮动。
Text align of an unordered list item的可能重复

标签： html css

【解决方案1】：

这是你想要的吗？

aside {
      font-size: 150%;
      font-family: fantasy;
      font-variant: small-caps;
      line-height: 2em;
    	background: rgba(187,219,136,0.75);
    	width: 90%;
    	height: 100px;
    	text-align: center;
    }
    aside{
      margin: auto;
      margin-top: 20px;
    }
    aside li{
      display: inline-block;
      padding: 0 2%;
      font-size: 100%;
    }

<aside>
      <ul>
        <li id="matematica"><a href="matematica.html" title="Ver resumos de Matemática">Matemática</a></li>
        <li><a href="geografia.html" title="Ver resumos de Geografia">Geografia</a></li>
        <li><a href="fisica.html" title="Ver resumos de Física">Física</a></li>
        <li><a href="historia.html" title="Ver resumos de História">História</a></li>
        <li><a href="portugues.html" title="Ver resumos de Português">Português</a></li>
        <li id="quimica"><a href="quimica.html" title="Ver resumos de Química">Química</a></li>
      </ul>
    </aside>

【讨论】：

是的，这正是我想要的。非常感谢:)
你能绿色勾号（接受解决方案）答案，这样每个人都知道这是有效的答案。

【解决方案2】：

尝试：

aside li{
 display:inline-block;
 padding: 0 2%;
 font-size: 100%;
}

也去掉浮动；

【讨论】：

【解决方案3】：

如果我正确理解你想要达到的目标，你可以尝试改变：

aside li{
  float: left;
  padding: 0 2%;
  font-size: 100%;
}

到

aside li{
  display: inline;
  padding: 0 2%;
  font-size: 100%;
}

在JSFiddle 上查看它，同时检查list-style-type 属性中的<ul> 标签。

【讨论】：

【解决方案4】：

我认为您不能选择该圆圈，因为它不是元素。你可以自己看看。只需去检查并尝试找到该元素。但您可以制作自定义列表。

<center><div id="b">
 <div class="a"><span></span> List 1</div>
 <div class="a"><span></span> List 2</div>
 <div class="a"><span></span> List 3</div>
</div></center>
<style>
span {
 background:black;
 height:10px;
 width:10px;
 border-radius:30px;
 display:inline-block;}
</style>

【讨论】：