我真的是 css 的新手，我正在试验如何创建一个 googe 登陆页面，这是我正在上的类(class)的一部分，我从导航栏开始，即使我已经使用了内联 block ，文本是仍在文本行下方而不是其中心，我的代码是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage</title>
<style type="text/css">
.navigation {
width: 400;
text-align: right;
}
.navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navigation li {
display:inline-block;
text-decoration:none;
}
.navigation ul li a {
text-decoration:none;
padding:0 12px;
}
.navigation #profile-image {
text-align: center;
height: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="navigation">
<ul>
<li style="margin: 5px auto;"> Glendon Philipp </li>
<li> <a href="#news"> Gmail </a> </li>
<li> <a href="#contact"> <img src="img/google-button.jpeg"> </a> </li>
<li> <a href="#about"> <img src="img/google-button-notification.jpg"> </a> </li>
<li> <a href="#profile-image"> <img id="profile-image" src="img/profile.jpg"> </a></li>
</ul>
</div>
</body>
</html>
最佳答案
给你:
.navigation li {
display:inline-block;
vertical-align: middle;
text-decoration:none;
}
这会将您的文本与图像的垂直中间对齐。不过，您需要调整边距和填充。
这是 fiddle :https://jsfiddle.net/s04o30ya/
关于html - 如何使导航栏中的文本行居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36268757/