I have this layout (which is a header):
<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>
what i would like to achieve is:
I did this:
.logo {
position: absolute;
width: 80%;
left: 10%;
right: 10%;
bottom: 0;
}
but it somehow dosen't work as you can see here: https://jsfiddle.net/9kauhbhs/2/
You can try this.. 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>
Use left: 50%
and a margin left that is negative half of the image width.
eg
.logo {
position: absolute;
width: 80%;
left: 50%;
bottom: 0;
margin-left: calc(-80% / 2);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.