在動態高度自舉排列中垂直對齊圖標

我在自舉中有一個提醒，其中有一個圖標以及旁邊的一些文本。兩者分別分爲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

在動態高度自舉排列中垂直對齊圖標

回答

相關問題