我有这个布局(这是一个标题):
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color: aqua; height: 160px;">
<img src="logo.png" class="img-responsive logo">
</div>
<div class="col-sm-8" style="background-color: blueviolet; height: 160px;"></div>
<div class="col-sm-2" style="background-color: aqua; height: 160px;"></div>
</div>
</div>
我想要实现的目标是:
我这样做了:
.logo {
position: absolute;
width: 80%;
left: 10%;
right: 10%;
bottom: 0;
}
但它在某种程度上不起作用,你可以在这里看到: https://jsfiddle.net/9kauhbhs/2/
答案 0 :(得分:0)
你可以试试这个.. https://jsfiddle.net/9kauhbhs/7/
.container{
position:absolute;
bottom:0px;
height:auto;
width:100%;
text-align:center;
}
.logo {
position: relative;
width: auto;
height:auto;
margin:0 auto;
max-height:100%;
vertical-align:bottom;
}
<div class="col-sm-2 text-center" style="background-color: aqua; height: 160px;">
<div class="container">
<img src="http://www.w3schools.com/html/pic_mountain.jpg" class="logo">
</div>
</div>
答案 1 :(得分:0)
使用left: 50%
和左边距为图像宽度的负半边。
e.g。
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}