在动态高度自举排列中垂直对齐图标

我在自举中有一个提醒，其中有一个图标以及旁边的一些文本。两者分别分为col-md-1和col-md-11。右侧的文本可以是长度动态的，所以如果长度很长，它会包装到下一行。但图标总是一样的。我无法弄清楚如何将图标垂直居中放置在其col内部。默认情况下，如果文本是一条线，它的中心，像这样：在动态高度自举排列中垂直对齐图标

但是，当文云过去一条线，图标保持在相同的位置。我对图标（fontawesome）的<i>使用vertical-align:middle尝试过，但没有结果 - 在这里找到：

我也试图把的display:table内的图标，试图采取vertical-align:middle的优势，但没有运气。如果可能，我想保留Bootstrap列间距，但是我希望无论文本的长度如何，图标都居中。

<div class="alert alert-danger" 
    role="alert"> 
    <div class="row"> 
     <div class="col-md-1"> 
      <i class="fa fa-exclamation-triangle fa-2x" 
      style="vertical-align:middle;"></i> 
     </div> 
     <div class="col-md-11"> 
      {{vm.modalConfig.message}} 
     </div> 
    </div> 
</div>

编辑 - 也为了便于帮助，这里有一个plunkr！

来源

2017-02-15 erp

请张贴您的html/css。 –

请把你的代码 – amansoni211

道歉。发布。我也会在一秒钟内发起一个游戏。 – erp

您可以使用.row和上的flexbox垂直居中。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<style> 
 
    .alert > .row { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
</style> 
 
<div class="alert alert-danger" 
 
    role="alert"> 
 
    <div class="row"> 
 
     <div class="col-md-1"> 
 
      <i class="fa fa-exclamation-triangle fa-2x" 
 
      style="vertical-align:middle;"></i> 
 
     </div> 
 
     <div class="col-md-11"> 
 
      long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text 
 
     </div> 
 
    </div> 
 
</div>

来源

2017-02-15 19:05:59

哇。可笑容易。这是烘焙到Bootstrap？ – erp

@erp我不确定Bootstrap是否有这个功能。浏览器对'flexbox'的支持很好，但还不是很普遍。这是人们仍然使用相对定位技术的唯一原因。另外，请确保包含浏览器支持，特别是对于'-webkit'，或者您可能在Safari中遇到问题。 – Jesse

@erp花了几分钟阅读bootstrap CSS文件（我不使用引导程序）并且看起来像是这样。更新了我的答案。 –

您既可以使用flexbox居中，或使用position: relative和一些transform性质。

Flexbox的：

.row { 
    -webkit-display: flex; 
    -webkit-align-items: center; 
    display: flex; 
    align-items: center; 
}

相对定位：

.row { 
    position: relative; 
} 
.row col-md-1 { 
    position: absolute; 
    top: 50%; 
    transform: translate&(-50%); 
}

选项1绝对是更快的解决方案。我还建议为.row添加一个单独的类或ID，以便在整个框架中不应用这些更改。

来源

2017-02-15 19:07:37 Jesse

在动态高度自举排列中垂直对齐图标

回答

相关问题