/* Global */
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
}
/* Header */
header {
width: 100vw;
padding: 1.5em;
background-color: #ccc;
}
header > a {
background-color: yellow;
}
/* Navigation */
nav {
display: inline-block;
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Header -->
<header>
<!-- Navigation -->
<nav>
<a href="#">Portfolio</a>
<a href="#">Expertise</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<a href="#">Saad Al-Sabbagh</a>
</header>
</body>
</html>我想将直接子项置于标题下方的中心，这是导航之外的 anchor 元素。
标题是全宽的，导航是行内 block ，但是当我试图做文本对齐时:居中；它似乎不起作用。
我得出的结论是该属性只适用于 block 级元素，我确信这个结论是正确的。
为了使文本居中，您有什么建议？
最佳答案
如果我错了请纠正我，但这正是您想要的。我将导航设为列表，并在“ Logo ”上放置了一个类。
.logo {
text-align: center;
}
这将使文本保持居中并且只有文本是可点击的，而不是整行/ block 。
/* Global */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
}
/* Header */
header {
width: 100vw;
position: relative;
padding: 1.5rem;
background-color: #ccc;
}
header > a {
background-color: yellow;
}
/* Navigation */
nav {
position: absolute;
top: 24px;
left: 10px;
display: inline-block;
background-color: red;
}
.list,
.list-item {
margin: 0;
padding: 0;
}
.list {
list-style: none;
}
.list-item {
display: inline-block;
}
.logo {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title -->
<title>Saad Al-Sabbagh | Web Developer</title>
<!-- CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700">
</head>
<body>
<!-- Header -->
<header>
<!-- Navigation -->
<nav>
<ul class="list">
<li class="list-item"><a href="#">Portfolio</a>
</li>
<li class="list-item"><a href="#">Expertise</a>
</li>
<li class="list-item"><a href="#">About</a>
</li>
<li class="list-item"><a href="#">Contact</a>
</li>
</ul>
</nav>
<div class="logo">
<a href="#">Saad Al-Sabbagh</a>
</div>
</header>
</body>
</html>关于html - 居中对齐标题中的 anchor 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40318949/