如何在列中对齐并使响应图像居中

时间:2016-01-19 18:50:06

标签: css twitter-bootstrap

我有这个布局(这是一个标题):

<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>

我想要实现的目标是:

  • 将徽标与底部和中心对齐
  • 让图像负责(将宽度设置为列的80%)

我这样做了:

.logo {
  position: absolute;
  width: 80%;
  left: 10%;
  right: 10%;
  bottom: 0;
}

但它在某种程度上不起作用,你可以在这里看到: https://jsfiddle.net/9kauhbhs/2/

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); 
}

Fiddle