将图像中心与引导程序对齐答案

【问题标题】：Align image center with bootstrap将图像中心与引导程序对齐
【发布时间】：2013-09-17 18:20:05
【问题描述】：

目前我有：

<div id="">
    <input type="text" class="span2 pull-left" value="">
    <i class="icon"></i>
    <input type="text" class="span2 pull-right" value="">
</div>

我想在左边有一个输入，在右边有一个输入和图像死点。我怎样才能使图像居中并仍然水平对齐。

我尝试将图像包裹在 av div, p 中并使用 .pagination-centered, .pagination-center。它的作品 okei，但打破了水平。

目前我只使用left = 50％的绝对位置，这在我的标签和计算机上看起来很棒，但不是我的手机。

现在有什么技巧可以让它发挥作用吗？

【问题讨论】：

你知道有一个类叫row 对吧？

标签： image twitter-bootstrap vertical-alignment alignment

【解决方案1】：

<div class="container">
  <div class="span12">
    <div class="row">
      <div class="span4"><input type="text" value=""></div>
      <div class="span4"><img alt="300x300" src="http://lorempixel.com/300/300/" class="img-responsive"></div>
      <div class="span4"><input type="text" value=""></div>
   </div>
  </div>
</div>

您可能想尝试将此代码用于版本号 2 This

【讨论】：

我不知道行类。我只是将模板编辑到我正在使用的程序中。谢谢您的帮助。我下班回家看看。

【解决方案2】：

你在看this

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-4">
                           <input type="text" class"span2 pull-left" value="">
                        </div>
                        <div class="col-md-4">
                            <img alt="140x140" src="http://lorempixel.com/140/140/" class="img-responsive">
                        </div>
                        <div class="col-md-4">
                            <input type="text" class"span2 pull-right" value="">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

【讨论】：

版本 >= 3