Question

目前文字位于底部，我希望它在中间，所以链接上方和下方有相同数量的空间???

这对于什么是正确的CSS？

＆＃13;

body{
	margin:0px;
	padding:0px;
	font-family: 'Comfortaa', cursive;
	text-align:center;
}

input[type="text"], input[type="password"]{
	outline:none;
	padding:10px;
	display:block;
	width:300px;
	border-radius: 3px;
	border:1px solid #eee;
	margin:20px auto;
}

input[type="submit"]{
	padding:10px;
	color:#fff;
	background:#0098cb;
	width:320px;
	margin:20px auto;
	margin-top:0px;
	border:0px;
	border-radius: 3px;
	cursor:pointer;
}

input[type="submit"]:hover{
	background:#00b8eb;
}

.phone{
	border-bottom:1px solid #eee;
	padding:10px 0px;
	width:100%;
	overflow: hidden;
	text-align: right;
	font-weight: bold;
	padding-right: 20px;
	float:right;
	background-color:#2c2c2f;
	color: #fff;
}

.header{
	border-bottom:1px solid #eee;
	padding:10px 0px;
	width:100%;
	text-align:left;
	overflow: hidden;
	padding-bottom: 20px;
}

#logo {
	padding-left: 10px;
	align-content: left;
}

.header a{
	color:#333;
	text-decoration: none;
	margin-left: 20px;
}

.header a.active {
	color: red;
}

.footer {
	border-top:1px solid #eee;
	font-size:50%;
	 position: fixed;
    bottom: 0;
    width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title</title>
	<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
<div class="phone"><a>Freephone: 0800 96 161</a></div>
<div class="header">
<img id="logo" src="images\logo.png" alt="logo">
<a href="index.html">Home</a>
<a href="products.html">Products</a></div>

	<h1></h1>

<div class="footer">
<p><b></p>
</div>
</body>
</html>

＆＃13;

//编辑后添加完整代码供人们查看，这可能会更有用

Answer 1

尝试将列表项的行高设置为标题的相同高度：

.header{
    border-bottom:1px solid #eee;
    width:100%;
    text-align:left;
    overflow: hidden;
    height: 40px; /* This same as */
}

.header a{
    color:#333;
    text-decoration: none;
    margin-left: 20px;
    line-height: 40px; /* This */
}

body{
	margin:0px;
	padding:0px;
	font-family: 'Comfortaa', cursive;
	text-align:center;
}

input[type="text"], input[type="password"]{
	outline:none;
	padding:10px;
	display:block;
	width:300px;
	border-radius: 3px;
	border:1px solid #eee;
	margin:20px auto;
}

input[type="submit"]{
	padding:10px;
	color:#fff;
	background:#0098cb;
	width:320px;
	margin:20px auto;
	margin-top:0px;
	border:0px;
	border-radius: 3px;
	cursor:pointer;
}

input[type="submit"]:hover{
	background:#00b8eb;
}

.phone{
	border-bottom:1px solid #eee;
	padding:10px 0px;
	width:100%;
	overflow: hidden;
	text-align: right;
	font-weight: bold;
	padding-right: 20px;
	float:right;
	background-color:#2c2c2f;
	color: #fff;
}

.header{
	border-bottom:1px solid #eee;
	width:100%;
	text-align:left;
	overflow: hidden;
    height: 40px; /* This same as */
}

#logo {
	padding-left: 10px;
	align-content: left;
}

.header a{
	color:#333;
	text-decoration: none;
	margin-left: 20px;
    line-height: 40px; /* This */
}

.header a.active {
	color: red;
}

.footer {
	border-top:1px solid #eee;
	font-size:50%;
	 position: fixed;
    bottom: 0;
    width: 100%;
}

<!DOCTYPE html>
<html>
<head>
	<title</title>
	<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
<div class="phone"><a>Freephone: 0800 96 161</a></div>
<div class="header">
<img id="logo" src="images\logo.png" alt="logo">
<a href="index.html">Home</a>
<a href="products.html">Products</a></div>

	<h1></h1>

<div class="footer">
<p><b></p>
</div>
</body>
</html>

Answer 2

现在工作正常

＆＃13;

<div class="header">
	<img id="logo" src="https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d.jpg" alt="logo">
	<a href="index.html">Home</a>
	<a href="products.html">Products</a>
</div>

＆＃13;

header{
    display: flex;
}
header a {
    display: flex;
    align-items: center;
}

＆＃13;

CSS对齐导航栏

2 个答案: