Jordan Baron Jordan Baron - 1 month ago 7
CSS Question

CSS - Overflow not working as expected

I am trying to align my span text with my tags. I tried using

vertical-align: middle;
on the tags, but that doesn't work.



body {
margin: 0;
padding: 0;
font-family: Arial;
font-weight: bold;
}

nav {
background-color: #298fca;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
vertical-align: middle;
}

a {
padding: 10px 25px;
font-size: 20px;
margin: 10px;
border: 1px solid #61bd4f;
background-color: #61bd4f;
color: white;
border-radius: 5px;
float: right;
text-decoration: none;
}

span {
color: white;
background-color: #298fca;
overflow: auto;
font-size: 30px;
}

<nav>
<span>Test</span>
<a href="register.php">Register</a>
<a href="login.php">Login</a>
</nav>




Answer

The vertical-align property works for elements as inline-level or table-cell

I've commented out unecessary properties from your CSS

Add this to your existing CSS

nav {
  display: table;
  width: 100%;
}

span {
  display: table-cell;
  vertical-align: middle;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-weight: bold;
}

nav {
	background-color: #298fca;
	/*overflow: hidden;*/
	list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    /*vertical-align: middle;*/
  
   display: table;
   width: 100%;
}

a {
	padding: 10px 25px;
	font-size: 20px;
	margin: 10px;
	border: 1px solid #61bd4f;
	background-color: #61bd4f;
	color: white;
	border-radius: 5px;
	float: right;
	text-decoration: none;
}

span {
	color: white;
	background-color: #298fca;
	/*overflow: auto;*/
	font-size: 30px;
  
    display: table-cell;
    vertical-align: middle;
}
<nav>
    <span>Test</span>
    <a href="register.php">Register</a>
    <a href="login.php">Login</a>
</nav>