Question

我想知道我是否可以将无序列表显示在页面中间，内容保留在那里但文本点保持在侧面。

我尝试使用text-align属性来实现此目的，尽管这不会产生预期的效果。

ul {
  font-size: 16px;
  font-family: Arial;
  text-align: center
}

<!DOCTYPE html>
<html "lang=eng">
<head>
  <title>Example</title>
</head>

<body>
  <ul>
    <Li></Li>
    <Li></Li>
    <Li></Li>
  </ul>
</body>

</html>

请注意，上述代码段仅供演示之用。

Answer 1

也许在样式上添加list-style-type:none;？

<div>
  <ul style="font-size: 16px; font-family: Arial;list-style-type: none; text-align: center;">
    <li>1</li>
    <li>2</li>
  </ul>
</div>

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <ul style="font-size: 16px; font-family: Arial;list-style-type: none; text-align: center;">
                <li>1</li>
                <li>2</li>
            </ul>
        </div>
    </body>
</html>

Answer 2

指定ul的固定大小，并使文本对齐到中心工作，如果你的意思是这样的

<html>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</body>
</html>

<style>
    ul{
        width:100px;
        height:20px;
    }
    li{
        text-align:center;
    }
</style>

Answer 3

您可能希望保持动态，而不是将宽度设置为ul，而是使用margin: 0 auto将无序列表与中心对齐。

ul {
  font-size: 16px;
  font-family: Arial;
  text-align: center;
  margin: 0 auto;
}

<ul>
  <Li>1</Li>
  <Li>2</Li>
  <Li>3</Li>
</ul>

如何在页面中间对齐列表（ul和Li）

3 个答案: