我有以下问题。
我在Boostrap的jumbotron中有一个标题。现在我想将图像停靠在底部中心。
我尝试了stackoverflow上显示的其他一些方法,但似乎没有任何工作。
以下是代码:http://jsfiddle.net/S298j/3/
代码问题:
<div class="jumbotron-main">
<h1>
HERE IS MY HEADLINE
</h1><br>
<h2>
HERE IS MY SUB HEADLINE
</h2>
<img src="imageskIsFb.png"/>
</div>
答案 0 :(得分:1)
试试这个: 将你的img包装在一个这样的容器中,使用&#34; center-block&#34;类。
<div class="center-block">
<img src="http://i.epvpimg.com/kIsFb.png" />
</div>
这将使标题文本下方的img居中对齐。 接下来添加一些自定义样式。这段代码让你关闭。玩尺寸。
.jumbotron-main img {
width: 100%;
max-width: 600px;
}
答案 1 :(得分:0)
<html>
<title>test</title>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.jumbotron-head {
background-color: #242729;
height: 80px;
margin: auto;
background-size: cover;
}
</style>
</head>
<body style="background-color: #C6491A;">
<div class="jumbotron-head">
<h1 class="text-center" style="font-size:80px;color:white;">Guild Hosting</h1>
</div>
<div class="container">
<h1 class="text-center"style="color:white;">HERE IS MY HEADLINE</h1>
<h2 class="text-center"style="color:white;">HERE IS MY SUB HEADLINE</h2>
<img src="http://i.epvpimg.com/kIsFb.png" style="padding-top:170px;padding-right:50px;" align="middle"/>
</div>
</body>
</html>