CSS - Overflow not working as expected

Question

I am trying to align my span text with my <a> tags. I tried using vertical-align: middle; on the <a> 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>

The vertical align property works for elements with display as inline or table-cell — Siddharth Thevaril
– Siddharth Thevaril, Commented Oct 15, 2016 at 14:47

Siddharth Thevaril · Accepted Answer · 2016-10-15 14:51:30Z

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>

Dhaval · Accepted Answer · 2016-10-15 14:52:44Z

A workaround will be using line-height

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;
    line-height: 2.1;
    display: block;
    float: left;
}

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

Collectives™ on Stack Overflow

CSS - Overflow not working as expected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related