这是我第一次询问 Stack Overflow，如果格式不完美，我深表歉意。无论如何，我在一个使用 Bootstrap 3 的网站上工作。它有一个图像，垂直和水平居中在页面中间。它还具有背景图像。我试图在中心的图像下方放置一个标题，但标题位于页面顶部。页面底部有一个固定的导航栏。
这是 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<title>
App
</title>
<style>
html {
background-image: url("gradiant.png");
}
.logo {
position: absolute;
top: 40%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -216.5px;
margin-left: -236.25px;
}
.nav-pills li a {
color: white;
font-size: 250%;
}
.nav-pills li a {
background-color: transparent;
color: #ffffff;
transition: all .5s;
border: 2px solid transparent;
}
.nav-pills li a:hover{
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.dropdown{
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.nav-pills > li > .dropdown-menu {
background-color: transparent;
border-color: #ffffff;
}
.dropdown-toggle {
background-color: transparent !important;
}
.dropdown-toggle:active, .open .dropdown-toggle {
background-color: transparent !important;
color: white !important;
border-color: #ffffff !important;
}
.nav-pills {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.nav-pills > li {
display: inline-block;
float:none;
}
h1 {
position: absolute;
color: #ffffff;
}
</style>
</head>
<body>
<img alt="App" src="app.png" width=472.5 height=433 class="logo" align="middle" >
<h1>App</h1>
<ul class="nav nav-pills navbar-fixed-bottom">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="app.html">App</a></li>
</ul>
</li>
<ul class="dropdown-menu">
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
最佳答案
这不是特定于 Bootstrap 的答案，但您可以做的是为 Logo 创建一个容器并将 CSS(您当前正在应用于图像)应用到该容器。然后只需将标题放在容器中图像下方:
html {
background-image: url("gradiant.png");
}
.logo-container {
position: absolute;
top: 40%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -216.5px;
margin-left: -236.25px;
}
.logo-container img {
width:100%;
}
.nav-pills li a {
color: white;
font-size: 250%;
}
.nav-pills li a {
background-color: transparent;
color: #ffffff;
transition: all .5s;
border: 2px solid transparent;
}
.nav-pills li a:hover {
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.dropdown {
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.nav-pills > li > .dropdown-menu {
background-color: transparent;
border-color: #ffffff;
}
.dropdown-toggle {
background-color: transparent !important;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
background-color: transparent !important;
color: white !important;
border-color: #ffffff !important;
}
.nav-pills {
float: none;
margin: 0 auto;
display: block;
text-align: center;
}
.nav-pills > li {
display: inline-block;
float: none;
}
h1 {
position: absolute;
color: #ffffff;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="logo-container">
<img alt="App" src="http://lorempixel.com/500/500/" class="logo" align="middle" >
<h2>Title goes here</h2>
</div>
<h1>App</h1>
<ul class="nav nav-pills navbar-fixed-bottom">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apps <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="app.html">App</a></li>
</ul>
</li>
<li>
<ul class="dropdown-menu">
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>关于html - 如何使标题位于 Bootstrap 3 中的居中图片下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43080114/