Let's explore a unique way to vertically center content within a div while steering away from fixed values. Interestingly, the typical solutions don't always work as expected in a section environment.
The challenge now is: How can we center the navigation bar in the given code?
.header {
width: 100%;
height: 115px;
margin: 0;
padding: 0;
background-color: lightgray;
text-align:center;
}
.header ul {
list-style-type: none;
}
.header li {
display: inline;
}
body {
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="header">
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</section>
</body>
</html>