垂直对齐引导行中的跨度

Posted 2023-03-06

【中文标题】垂直对齐引导行中的跨度

【英文标题】：vertically align span in bootstrap row

【发布时间】：2015-06-16 05:55:22

【问题描述】：

我有一个带有“行”类的引导 div，里面有 2 个 div 作为列，A 和 B。

A 包含一个带有图标的 span。 B 包含一个高度可变的面板，即使加载后，用户也可以向其添加内容，其高度仍然可以增加或变小。

我需要将跨度垂直居中，以面板的高度为参考。

这是我的代码：

<div class="row">
    <div class="col-lg-3"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-9">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div> 

第一部分是现在如何显示，第二部分是我希望它如何显示。如您所见，“内容”是可内联编辑的，因此如果面板变大，跨度也需要调整。

非常感谢！

编辑 1 我必须补充一点，我正在使用 IE。 我尝试了第一个建议，结果如下：

【问题讨论】：

这些图片在我看来是一样的。

也许这个栈溢出的遮阳篷会帮助***.com/questions/20465825/…

【参考方案1】：

我最终使用了这个：

<div class="row">
    <div class="col-lg-1 v-align"><span class="icon-clipboard icon-agenda-item"></span></div>
    <div class="col-lg-10 v-align">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div> 
    </div> 
</div> 

地点：

.v-align 
    float: none;
    display: inline-block;
    vertical-align: middle;

请注意，添加的两列等于 11，而不是 12。这是关键！我不知道为什么，但如果我把它留了 1 和 11（总共 12 个），它就会显示为 mi 编辑图像。

谢谢！

【参考方案2】：

是的，你可以做到，但是你必须删除一些引导类并添加两个你自己的类，你可以很容易地设置它。这是代码

.content
  clear:both;
  display:block;

.a
  display:inlin-block;
  vertical-align:middle;
  width:20%;



.b
  display:inlin-block;
  vertical-align:middle;
  width:80%;

<div class="row">
  <div class="col-lg-12">
    <div class="content">
    <div class="a">
      <span class="icon-clipboard icon-agenda-item"></span>
    </div>
    <div class="b">
        <div class="panel panel-default deletable-panel">
            <div class="panel-heading">
               heading content
            </div>
            <div class="panel-body">
               body content
            </div> 
        </div>  
    </div> 
    </div>
    </div> 
</div> 

希望对你有帮助

问候， 萨巴什

【讨论】：

谢谢！但它仍然不起作用，我将编辑我的问题，以便您查看。

实际上你在代码中做了什么。不起作用。如果您将代码替换为我的代码，那么它将起作用。您可以设置a和b类的宽度，并根据屏幕大小进行更改。