[英]How to bottom align and center an responsive image in a column
我有这个布局(这是一个标题):
<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/
您可以尝试一下。.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>
left: 50%
使用left: 50%
,左边距为图像宽度的负一半。
例如
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.