hi我希望我的文本位于div中ul内部li的中心但无论我做什么，我都无法修复
我找不到问题
这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initil-scall=1.0">
<title>Template</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="menu">
<header>
<nav>
<div id="qw" class="navigation">
<ul>
<li><a href="#">خانه</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">اموزش ها</a></li>
</ul>
</div>
</nav>
</header>
</div>
</body>
</html>
这是我的css代码
body {
background: url("images (1).jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoder(src='images.jpg', sizingMethod='scale')";
}
header nav {
width: 100%;
height: 60px;
top: 0;
right: 0;
line-height: 55px;
border-bottom: #9f4f89;
position: fixed;
z-index: 999999;
background: #d39fb7;
}
header nav #qw {
background: transparent url("") no-repeat left 5px;
}
header nav #qw ul {
list-style: none;
text-align: center;
}
header nav #qw li {
height: 2em;
float: right;
padding: auto;
}
header nav #qw ul li {
display: inline-block;
float: right;
}
header nav #qw ul li a {
padding: 32px 32px 7px 7px;
font-size: 20px;
margin: auto;
text-decoration: none;
text-align: center;
border-left: 1px solid #fff;
color: #ffffff;
}
使用此代码，文本位于元素的左下角，但我希望它们位于元素的中心
从li标签中删除float:right，并在a标签中添加display:inline-block
body {
background: url("images (1).jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoder(src='images.jpg', sizingMethod='scale')";
}
header nav {
width: 100%;
height: 60px;
top: 0;
right: 0;
line-height: 55px;
border-bottom: #9f4f89;
position: fixed;
z-index: 999999;
background: #d39fb7;
}
header nav #qw {
background: transparent url("") no-repeat left 5px;
}
header nav #qw ul {
list-style: none;
text-align: center;
}
header nav #qw li {
height: 2em;
padding: auto;
}
header nav #qw ul li {
display: inline-block;
text-align: center;
}
header nav #qw ul li a {
padding: 0 20px;
font-size: 20px;
margin: auto;
text-decoration: none;
text-align: center;
border-left: 1px solid #fff;
color: #ffffff;
display: inline-block;
}<div id="menu">
<header>
<nav>
<div id="qw" class="navigation">
<ul>
<li><a href="#">خانه</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">اموزش ها</a></li>
</ul>
</div>
</nav>
</header>
</div>您为链接设置的填充：
header nav #qw ul li a {
padding: 32px 32px 7px 7px;
/* everything else that's already wrriten */
}
是造成问题的原因，因为填充设置的顺序为：
padding: top right bottom left;
因此，为了使文本在li中居中，您应该将填充更改为：
header nav #qw ul li a {
padding: 32px 32px 7px 32px;
/* everything else that's already wrriten */
}
或者，如果您希望顶部和底部填充相同，左侧和右侧填充相同，那么：
header nav #qw ul li a {
padding: 7px 32px 7px 32px;
/* everything else that's already wrriten */
}
这会解决你的问题。
p.S.您也可以从：中删除float: right;
header nav #qw ul li {
display: inline;
float: right; /* <- this part is not needed. */
}