Question

我们总是让mmap li制作导航栏，但在此之后，文字也会向左浮动。我怎样才能制作文字中心？我已经使用了float:left，但它不起作用，它不能使y轴在中心。有人说我可以使用text-align:center;制作文字对齐中心，但每次添加padding时，我都可以更改填充，或者我们可以使用li吗？有人能给我其他有效的方法吗？以下是我的css代码：

display:inline

html代码：

ul{
list-style:none;
}
ul li{
float: left;
font-size: 20px;
width: 130px;
height: 50px;
border-right: 1px solid blue;
text-align:center;
}

enter image description here

Answer 1

在y轴上对齐称为vertical-align，它与text-align无关。

您可以选择垂直对齐项目：

添加line-height 或添加padding

选项1 - 行高

＆＃13;

ul{
list-style:none;
}
ul li{
  float: left;
  height: 50px;
  line-height: 50px;
  border-right: 1px solid blue;
}

＆＃13;

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

＆＃13;

选项2：填充

＆＃13;

ul{
list-style:none;
}
ul li{
  float: left;
  padding: 15px 0;
  border-right: 1px solid blue;
}

＆＃13;

<body>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>

＆＃13;

在这两种情况下，如果您想要将文本居中，请添加text-align: center;并为li元素添加宽度。

Answer 2

li {
  list-style: none;
  display: inline;
  float: left;
  padding: 10px;
  border: solid;
}

<nav>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
</nav>

在ul li向左浮动之后，我该如何制作文本对齐中心？

2 个答案: