Question

我的标题为H1居中对齐，右边有两个按钮。只要我为H1元素添加按钮的html，H1就不会保持相同的高度。

这是一张图片和我的代码：

@charset "UTF-8";
/* CSS Document */
html{font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "DejaVu Sans", Verdana, sans-serif;
background-color:#4A96AD;
color:#2a2a2a;
}
h1 {text-align:center;
font-size:70px;
font-weight:700;
color:#2a2a2a;
.btn {

  cursor: pointer;
  margin: 8px;
  border-radius: 5px;
  text-decoration: none;
  padding: 8px;
  font-size: 18px;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  display: inline-block;
}
.green {
  color: #fff;
}
.green:hover { 
  color: #4A96AD;
  background-color: #2a2a2a;
}
.buttons {
  padding-top: 30px;
  text-align: right;
  float:top;
  margin:15px
}
.btn {
  cursor: pointer;
  margin: 8px;
  border-radius: 5px;
  text-decoration: none;
  padding: 8px;
  font-size: 18px;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  display: inline-block;
}
.home {
  color: #4A96AD;
  background-color: #2a2a2a;
}
.button {
  padding-top: 10px;
  text-align: left;
  margin:15px
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Flash</title>
</head>
<body>
<div class="main">
<div class="buttons">
    <a class="btn home" href="abcd">Home</a>
    <a class="btn green" href="abcd">Next Page ></a>
</div>
<h1>FLASH</h1>
</div>
</body>
</html>

正如您所看到的，“FLASH”低于按钮的高度，我只想让“FLASH”与按钮处于同一高度。提前谢谢！

Answer 1

＆＃13;

@charset "UTF-8";
/* CSS Document */
html{font-family:"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "DejaVu Sans", Verdana, sans-serif;
background-color:#4A96AD;
color:#2a2a2a;
}
h1 {text-align:center;
font-size:70px;
font-weight:700;
color:#2a2a2a;}
.green {
  color: #fff;
}
.green:hover { 
  color: #4A96AD;
  background-color: #2a2a2a;
}
.buttons {
  padding-top: 30px;
  text-align: right;
  float:top;
  margin:15px
}
.btn {
  cursor: pointer;
  margin: 8px;
  border-radius: 5px;
  text-decoration: none;
  padding: 8px;
  font-size: 18px;
  transition: .5s;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  display: inline-block;
}
.home {
  color: #4A96AD;
  background-color: #2a2a2a;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Flash</title>
</head>
<body>
<div class="main">
<div class="buttons">
    <a class="btn home" href="abcd">Home</a>
    <a class="btn green" href="abcd">Next Page ></a>
</div>
<h1>FLASH</h1>
</div>
</body>
</html>

＆＃13;

Answer 2

.buttons div是一个块级元素，这就是它推动你的h1的原因。您需要做的就是将你的.buttons div浮动到右边。

将此添加到.buttons样式：

  float: right;

将中间的H1文本与垂直对齐的按钮对齐

2 个答案: