Question

我想要一个如下所示的布局 - 但我目前在顶部有两个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>

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列，您应该在HTML中添加一个 col-md div，并将每个 6 更改为 4 ，如在Bootstrap中，行宽为12 pts。你也可以在一个单独的行中使用你的图像，其中只有一列，并且可能使用像 margin-bottom：-25 这样的东西来正确对齐，这可能会破坏一些响应性，所以不建议是你尝试的第一件事。

希望这适合你。

Answer 2

您是否尝试将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>

Answer 3

Gr8 Escape

HTML

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

                        </div>  

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

                 </div>

            </div>

CSS

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

.row
{
    margin-left:40%;
}

Answer 4

绝对位置很危险......试试这个：

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

DEMO：http://www.bootply.com/TMTdSQa8Bt#

对齐三列

4 个答案: