html - 对齐三列

Question

我想要像下面这样的布局 - 但我目前得到两个 md顶部的列

img应该在容器的中间 Vertical 和 Horizo​​ntal 和两个 md 对齐列应与 img 的中心对齐

我不想要卷轴

  `image div`

mid-6 mid-6

HTML:

  <div class="container">
            <div class="row">
                <div class="inner">
                     <img src="assets/img/logo.jpg" width="600" class="img-responsive" alt="Responsive image">
                </div>
                    <div class="col-md-6">  
                    1

                    </div>  

                    <div class="col-md-6">
                    2
                    </div>

             </div>

        </div>

CSS:

html, body {height: 100%;}

.container{
    overflow-y:auto;
    height:100%;
}​

.inner { position: relative; }
.inner img { 
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 5px;
}

Answer 1

我不确定你在问什么，但我为你提供了两个选项，它们都应该按预期工作。

第一个是将图像设置为绝对定位元素。

.inner img {
   position: absolute;
   top: 20;
}

另一列是实际的 3 列，您应该在其中添加一个 col-md div 到您的 HTML 并将每个列中的 6 更改为 4，与 Bootstrap 一样，行宽为 12 磅。您还可以在单​​独的一行中使用您的图像，其中只有一列，并且可能使用类似 ma​​rgin-bottom: -25 的东西来正确对齐它，这可能会破坏一些响应，因此不建议成为您尝试的第一件事。

希望这对你有用。