將中心的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文字與垂直對齊的按鈕對齊

回答

相關問題