在 header 中居中对齐锚元素

Question

/* 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>

我想将直接 child 置于 header 下方的中心位置，这是导航之外的锚元素。

header 是全角，导航是 inline-block，但是当我尝试做 text-align: center;它似乎不起作用。

我得出的结论是属性只适用于块级元素，我确信这个结论是正确的。

为了使文本居中，您有什么建议？

Answer 1

将锚包含在 div 中并为其设置以下样式。

在HTML中：

<div id="centeredAfterNav"><a href="#">Saad Al-Sabbagh</a></div>

在CSS中：

#centeredAfterNav {
    display: inline;
    /*left-margin: 100px;*/ /* Width of left aligned nav, to center in the remaining space */
    text-align: center;
}

Answer 2

如果我错了请纠正我，但这就是你想要的。我将导航设为列表并在 'logo'.

上放置了一个 class

.logo {
  text-align: center;
}

这将使文本居中并且只有文本是可点击的，而不是整个文本 line/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>

Answer 3

已解决：原来需要是绝对的..

nav {
position: absolute;
left: 0;
top: 18px;
padding-left: 21px;
text-align: left;
width: 500px;
}

在 header 中居中对齐锚元素

Center Aligning an anchor element in a header

html

css

center