我正在试验以下 HTML 代码。它在底部显示一个段落和两个按钮(上一页和下一页)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<!-- stylesheet -->
<style type="text/css" media="screen">
<!-- for UL. Hopefully straightforward to understand-->
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
<!-- to float left.Hopefully straightforward to understand -->
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
<!-- to float right. Hopefully straightforward to understand -->
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
<!-- for a in li. Hopefully straightforward to understand -->
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:centre; <!-- this isn't effective!-->
text-decoration:none;
}
</style>
</head>
<!-- mainbody-->
我希望文本居中对齐，但没有。我已经使用 text-align:centre 来设置 .我做错了什么？
<body>
<p>
1. Some Para.
</p>
<ul id="navigation" >
<!-- The Back and Next should centre up but they are left aligned -->
<li class="left"> <a href="#">Back</a></li>
<li class="right"> <a href="#">Next</a></li>
</ul>
</body>
</html>
最佳答案
您需要使用 text-align: center，而不是 'centre'。
ul#navigation li a {
display: block;
padding: .2 em;
color: #fff;
width: 5em;
background-color:#00f;
text-align: center;
text-decoration: none;
}
关于html - 文本对齐 :centre not aligning text correctly in <a>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41868110/