Html 对齐三列

我希望有一个像下面这样的布局，但我目前在顶部有两个

md

列

>代码> IMG应在容器的垂直和水平中对齐，两个代码> 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>

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

---

我不知道你在问什么，但我给你提供了两个选项，这两个选项都应该按预期工作

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

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

另一个是实际的3列，您应该在HTML中添加一个col mddiv，并将每个列中的6更改为4，因为在Bootstrap中，行宽度是12分。您也可以在单独的一行中使用图像，其中只有一列，也可以使用边距底部：-25之类的方法来正确对齐图像，这可能会破坏一些响应性，因此不建议您首先尝试使用它

---

希望这对您有效。

您是否尝试将col-md-12类分配给内部div

 <div class="container">
        <div class="row">
            <div class="inner col-md-12">
                 <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>

1.
2.

Gr8逃逸

HTML

---

绝对位置是危险的。。。试试这个：

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

与

!--
1.
2.

---

此处演示：

嗨，Jess，看一下我的小提琴，让我知道我可以举一个基本类似于PLZ的例子吗，但是当你把它放在应用引导风格的地方时，它当然会看起来不同。试试看。

.col-md-6
{
    float: left;
    width:40px;
    margin-left:10px;
}

.row
{
    margin-left:40%;
}

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

<div class="outer" style="height:300px"> <!-- height just to show v-centering -->
  <div class="inner" style="border:1px solid red"> !--
    <img src="//placehold.it/600x100">
      <div class="col-xs-6 text-right">
        <div class="label label-default">1</div>
      </div>  
      <div class="col-xs-6 text-left">
        <div class="label label-default">2</div>
      </div>
    </div>
</div>