将我的ul元素置于页面中心而不会丢失项目符号

Question

我正在尝试将我的ul元素放在一行中，在页面的中心，而不会丢失子弹点。

我希望将这两个ul元素放在页面中间。我尝试了各种CSS方法，但我仍然无法使其工作。

＆＃13;

＆＃13;

.list li {
    float: left;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
}

＆＃13;

<ul class="list">
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
    <li>© <?php echo date('Y'); ?> | All rights reserved</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用：before选择器

修复它

.list{ text-align: center; }
.list li
    {
        display: inline;
        margin-right: 1em;
    }
    .list li:before {
        content: '\2022';
        margin-right: 0.5em;
        color: red;
    }

 <ul class="list">
  <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
  <li>© <?php echo date('Y'); ?> | All rights reserved</li>
 </ul>

    

Answer 2

要使用css对元素进行居中，应该提供一些宽度，在本例中为100％。

ul {
  width: 100%;
  text-align: center;
}

如果这不起作用，可能还有另一个避免此属性的包装div，你应该在这里发布你的整个代码。

向我们提供MCVE example，欢迎来到stackOverflow！

Answer 3

您可以设置width容器的ul（否则它没有宽度，因为它的所有子元素都是浮动元素）。

一旦容器有宽度，您可以使用margin: 0 auto;将其居中：

＆＃13;

＆＃13;

.list {
  margin: 0 auto;
  width: 330px;
}
.list li
{
    float: left;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
}

＆＃13;

<ul class="list">
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
    <li>2018 | All rights reserved</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个

.list {
     position: relative;
     float: left;
     left: 50%;
     margin: 0 auto;
     padding: 0;
}



li {
    position: relative;
     float: left;
     right: 50%;
     margin-right: 10px;
     padding: 5px 10px;
     background: #fff;
     list-style: disc;
 }

Answer 5

使用::before

＆＃13;

＆＃13;

ul {
  text-align: center;
}

.list li
{
  display: inline;
}

.list li::before {
  content: '•';
  margin: 0px 0.3rem;
}

＆＃13;

<ul class="list">
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>
    <li>© <?php echo date('Y'); ?> | All rights reserved</li>
</ul>

＆＃13;

＆＃13;

＆＃13;