CSS - 溢出无法按预期工作

Question

我正在尝试将我的范围文本与我的<a>标记对齐。我尝试在vertical-align: middle;代码上使用<a>，但这并不起作用。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

vertical-align属性适用于inline-level或table-cell

的元素

我已经从你的CSS中评论了不必要的属性

将此添加到现有的CSS

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

解决方法是使用line-height

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;