我试图在图像下方的中心放置无花果标题（说明损坏的iPhone和图像的文字）。并将页脚/版权放在屏幕右侧。我尝试了常用的方法，但它似乎没有用，或者我犯了一个小错误，我只是没有注意到感谢您花时间提供帮助，度过美好的一天！ / p>
HTML：
timer.timerLeft = 15000;
的CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lindsey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
<li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
<li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="lindsey.jpg" style="width:370px;" alt="lindsey">
<figcaption>Damaged iPhone and Image</figcaption>
</div>
</div>
<a class="left carousel-control" href="liferockslifesucks.html" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="malek.html" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<footer class="footer">
<div class="container" style="display: table; height: 50px; overflow: hidden;">
<p class="text-muted" style="display: table-cell; vertical-align: middle;">© 2013-2015 Paulo Pinzon-Iradian, All Right Reserved</p>
</div>
</footer>
</body>
</html>
答案 0 :(得分：0)
也许这对您有用：您的figcaption设置为左侧，因此只需将其更改为居中位置，您的页脚CSS可以.footer .container调整到位置。
@font-face {
font-family: OpenSans-Regular;
src: url(fonts/OpenSans-Regular.ttf);
}
.navbar.navbar-default {
background: #fff;
margin-top: 2%;
border: 0px;
}
.navbar.navbar-brand {
font-family: Open Sans;
font-size: 22px;
}
ul,
li,
a {
font-family: Open Sans;
font-weight: 400;
font-size: 22px;
color: #000000;
font-weight: 100;
letter-spacing: -1px;
}
.navbar-toggle {
border: 0px;
}
.container .jumbotron.no-padding {
background: #fff;
border: 0px;
font-family: Open Sans;
font-size: 22px;
text-decoration: none;
padding-left: 0;
padding-right: 0;
color: #000000;
}
.footer .container {
position: absolute;
width: 100%;
bottom: 0;
padding-right: 20px;
text-align: right;
}
.right.carousel-control,
.left.carousel-control {
opacity: 0;
filter: alpha(opacity=0);
/* IE support */
width: 50%;
height: 100%;
}
img {
margin: auto;
}
figcaption {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>
</li>
<li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>
</li>
<li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/350x150/f00" style="width:370px;" alt="lindsey">
<figcaption>Damaged iPhone and Image</figcaption>
</div>
</div>
<a class="left carousel-control" href="liferockslifesucks.html" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="malek.html" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<footer class="footer">
<div class="container" style="display: table; height: 50px; overflow: hidden;">
<p class="text-muted" style="display: table-cell; vertical-align: middle;">© 2013-2015 Paulo Pinzon-Iradian, All Right Reserved</p>
</div>
</footer>