css - 如何在列中底部对齐和居中响应图像

Question

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

<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 与底部和中心对齐
• 让图像负责(将宽度设置为列的 80%)

我这样做了:

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

但它在某种程度上不起作用，正如您在此处看到的那样: https://jsfiddle.net/9kauhbhs/2/

Answer 1

使用 left: 50% 和图像宽度的负一半的左边距。

例如

.logo {
    position: absolute;
    width: 80%;
    left: 50%;
    bottom: 0;
    margin-left: calc(-80% / 2); 
}

Fiddle