Center Aligning an anchor element in a header

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

I want to center the immediate child under the header, that's the anchor element outside the nav.

The header is full width, and the navigation is inline-block, but when I am trying to do text-align: center; it doesn't seem to work.

I came to the conclusion that the property only works on block level elements, and I am sure that the conclusion is true.

What do you suggest in order to center the text in the middle?

Solution

Correct me if I'm wrong, but this is what you wanted. I made the navigation a list and put a class on the 'logo'.

.logo {
  text-align: center;
}

This will keep the text centered and only the text is clickable, not the whole 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>