将中心的H1文字与垂直对齐的按钮对齐

-1

我有一个中心对齐的H1的标题，右侧有两个按钮。只要我添加按钮的HTML abbr H1元素，H1不会保持在同一高度。将中心的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”与按钮的高度相同。在此先感谢！

来源

2015-11-16 Ayush Tanna

位置：绝对 –

我知道有重复遍布这个根本问题的地方。 – Rob

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

<!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>

来源

2015-11-16 13:45:25

的.buttons DIV是一个块级元素，这就是为什么它被压低你的H1。所有你需要做的就是将你的.buttons div浮动到右边。

添加到您的.buttons风格：

float: right;

来源

2015-11-17 02:26:07 partypete25

它做到了，但现在我的h1不再集中。当按钮和h1处于同一高度时，它已向左移位一点。谢谢 –

@AyushTanna明确：两者;到你的h1。这将解决它。 – partypete25

将中心的H1文字与垂直对齐的按钮对齐

回答

相关问题