ul li漂浮之后，我怎样才能让文字对齐中心？

我们总是让lifloat:left做出一个导航栏，但在此之后，文字也会左移。我怎样才能让文字中心？我已经使用了text-align:center;，但它不工作，不能使y轴居中。有人说我可以使用padding来创建文本对齐中心，但是每次我们添加一个li，我可能会改变填充，或者我们可以使用display:inline？有人能给我其他有效的方法吗？以下是我的CSS代码：ul li漂浮之后，我怎样才能让文字对齐中心？

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

html代码：在y轴

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

enter image description here

来源

2015-05-25 Hui An

请问您发布的代码和创建[小提琴]（http://jsfiddle.net/）。 – ketan

'float'和'text-align'是两个独立的属性。展示CSS coed究竟是什么尝试了，而不是展示一个图像应该如何实现。 – panther

对齐被称为vertical-align，它无关text-align。

你有两个选择，以垂直对齐您的项目：

添加line-height或添加padding

选项1 - 行高

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

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

选项2：填充

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

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

在这两种情况下，如果要居中的文本以及添加text-align: center;和宽度增加了li元素。

来源

2015-05-25 07:26:25 matthewelsom

，我们为什么要添加display：block？不是li块标签吗？我已经尝试过了，但第一种方法无法工作。 –

你给它的宽度，就像我上面的代码片段一样吗？ – matthewelsom

是的，我只是做了你写的东西。你可以在我的问题中看到它 –

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>

来源

2015-05-25 07:32:09

ul li漂浮之后，我怎样才能让文字对齐中心？

回答

相关问题